Make form/pagination button stick at the bottom #6494

@huntabyte commented on GitHub (Jun 22, 2022):

I have spent some time working on a solution for the tables and each one has some sort of shortcoming.

For the table, doesn't it make the most sense to add a vertical scroll and set a max height? This way all the top elements (title, buttons, etc) and the bottom elements (pagination, other buttons) don't have to scroll with it.

I was able to implement that, however, due to the dropdown menu required to be wrapped in a static position element (due to triggering a transform on dropdown open event causing a horizontal scrollbar to temporarily appear) - when scrolling down the dropdown menu stays on top and goes to the top of the page which looks very unpleasant.

A tradeoff to make this happen without a decent amount of restructuring is to drop the static position, but then overflow-x on the table must be hidden (at least down to a phone breakpoint).

Thoughts?

@huntabyte commented on GitHub (Jun 22, 2022): I have spent some time working on a solution for the tables and each one has some sort of shortcoming. For the table, doesn't it make the most sense to add a vertical scroll and set a max height? This way all the top elements (title, buttons, etc) and the bottom elements (pagination, other buttons) don't have to scroll with it. I was able to implement that, however, due to the dropdown menu required to be wrapped in a static position element (due to triggering a `transform` on dropdown open event causing a horizontal scrollbar to temporarily appear) - when scrolling down the dropdown menu stays on top and goes to the top of the page which looks very unpleasant. A tradeoff to make this happen without a decent amount of restructuring is to drop the static position, but then overflow-x on the table must be hidden (at least down to a phone breakpoint). Thoughts?

adam commented

@github-actions[bot] commented on GitHub (Aug 21, 2022):

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. NetBox is governed by a small group of core maintainers which means not all opened issues may receive direct feedback. Do not attempt to circumvent this process by "bumping" the issue; doing so will result in its immediate closure and you may be barred from participating in any future discussions. Please see our contributing guide.

@github-actions[bot] commented on GitHub (Aug 21, 2022): This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. NetBox is governed by a small group of core maintainers which means not all opened issues may receive direct feedback. **Do not** attempt to circumvent this process by "bumping" the issue; doing so will result in its immediate closure and you may be barred from participating in any future discussions. Please see our [contributing guide](https://github.com/netbox-community/netbox/blob/develop/CONTRIBUTING.md).

adam commented

@arthanson commented on GitHub (Sep 7, 2022):

I think this would be doable with the bootstrap sticky / fixed footer, however it would require repositioning several elements: for example the edit/delete buttons are outside the table card (where the pagination buttons are).

I'd purpose moving the docs/graphql/Rest API.. buttons into the sidebar along with the date-time and version string. This would free up the bottom which could then be used for a sticky footer where needed. However, this should be part of a larger UI / design conversation. The edit/delete buttons would then need to be moved together with the pagination buttons..

@arthanson commented on GitHub (Sep 7, 2022): I think this would be doable with the bootstrap sticky / fixed footer, however it would require repositioning several elements: for example the edit/delete buttons are outside the table card (where the pagination buttons are). I'd purpose moving the docs/graphql/Rest API.. buttons into the sidebar along with the date-time and version string. This would free up the bottom which could then be used for a sticky footer where needed. However, this should be part of a larger UI / design conversation. The edit/delete buttons would then need to be moved together with the pagination buttons.. ![Monosnap Racks | NetBox 2022-09-07 13-28-55](https://user-images.githubusercontent.com/99642/188971119-eea49ba7-2d80-4492-bb7e-1cbc98f2254a.png)

adam commented

@github-actions[bot] commented on GitHub (Dec 12, 2022):

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. NetBox is governed by a small group of core maintainers which means not all opened issues may receive direct feedback. Do not attempt to circumvent this process by "bumping" the issue; doing so will result in its immediate closure and you may be barred from participating in any future discussions. Please see our contributing guide.

@github-actions[bot] commented on GitHub (Dec 12, 2022): This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. NetBox is governed by a small group of core maintainers which means not all opened issues may receive direct feedback. **Do not** attempt to circumvent this process by "bumping" the issue; doing so will result in its immediate closure and you may be barred from participating in any future discussions. Please see our [contributing guide](https://github.com/netbox-community/netbox/blob/develop/CONTRIBUTING.md).

adam commented

@PieterL75 commented on GitHub (Dec 18, 2022):

Is it possible to create 'floating buttons'
Just leave them at their current location, but always show them at the bottom of the screen?
Not sure if bootstrap supports this

@PieterL75 commented on GitHub (Dec 18, 2022): Is it possible to create 'floating buttons' Just leave them at their current location, but always show them at the bottom of the screen? Not sure if bootstrap supports this

adam commented

@PieterL75 commented on GitHub (Jan 12, 2023):

That the 'position: sticky; bottom: 2em;' that does the job pretty good. (thx @arthanson )
https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46
When set to the div that contains the bottom buttons on an edit form, they just float above the rest..

really cool

All I need to know, is how this can be added as an option to the templates.. I guess we don't want all buttons to start floating

@PieterL75 commented on GitHub (Jan 12, 2023): That the 'position: sticky; bottom: 2em;' that does the job pretty good. (thx @arthanson ) https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46 When set to the div that contains the bottom buttons on an edit form, they just float above the rest.. really cool ![image](https://user-images.githubusercontent.com/74899468/212012174-74879695-ba4d-4434-a463-b97ddcd51f65.png) All I need to know, is how this can be added as an option to the templates.. I guess we don't want all buttons to start floating

adam commented

@PieterL75 commented on GitHub (Jan 12, 2023):

@jeremystretch can you remove the pending closure ? I want to get see if I can make this work

@PieterL75 commented on GitHub (Jan 12, 2023): @jeremystretch can you remove the pending closure ? I want to get see if I can make this work

adam commented

2025-12-29 19:41:32 +01:00

@PieterL75 commented on GitHub (Jan 12, 2023):

looks like the sticky-bottom is available in bootstrap 5.2 or higher.. any plans to upgrade ?

@PieterL75 commented on GitHub (Jan 12, 2023): looks like the sticky-bottom is available in bootstrap 5.2 or higher.. any plans to upgrade ?

adam commented

@kkthxbye-code commented on GitHub (Jan 12, 2023):

looks like the sticky-bottom is available in bootstrap 5.2 or higher.. any plans to upgrade ?

I avoided upgrading bootstrap when I did the last frontend dependency bump as it broke stuff.

https://github.com/netbox-community/netbox/pull/10555

You are free to experiment with upgrading it though. If you can fix the regressions I see no reason why we couldn't bump it.

@kkthxbye-code commented on GitHub (Jan 12, 2023): > looks like the sticky-bottom is available in bootstrap 5.2 or higher.. any plans to upgrade ? I avoided upgrading bootstrap when I did the last frontend dependency bump as it broke stuff. https://github.com/netbox-community/netbox/pull/10555 You are free to experiment with upgrading it though. If you can fix the regressions I see no reason why we couldn't bump it.

adam commented

2025-12-29 19:41:32 +01:00

@PieterL75 commented on GitHub (Jan 12, 2023):

now, that's above my skills... too bad..
but I'm going for the 'position-sticky' class and set an extra class for the position... works pretty good (windows chrome/edge, mac chrome/safari are liking it)

@PieterL75 commented on GitHub (Jan 12, 2023): now, that's above my skills... too bad.. but I'm going for the 'position-sticky' class and set an extra class for the position... works pretty good (windows chrome/edge, mac chrome/safari are liking it)

adam commented

2025-12-29 19:41:32 +01:00

@PieterL75 commented on GitHub (Feb 23, 2023):

@jeremystretch Is this approach ok ?
Anything you would like to see changed ?

@PieterL75 commented on GitHub (Feb 23, 2023): @jeremystretch Is this approach ok ? Anything you would like to see changed ?

adam commented

@bluikko commented on GitHub (Apr 7, 2023):

I want to state my dislike of the proposed solution in the OP second screenshot in the strongest of terms.
It reduces the vertical space available to actual data, the reason of existence of the page it illustrates, to less than half of the browser viewport:

Here the red lines are the non-data vertical space above and below the actual data.
In fact, only 9 lines fit in the table which is totally ridiculous!

This screenshot illustrates very well what is wrong with the top part of data pages, but so far the situation is not totally untenable since the bottom part is not "stickied" to take even more useful space for chrome.
Taking away all that bottom space as well is like trying to read a poster through a letterbox.

Already way too much padding exists - look at the vertical spacing of the table rows as there is as much data as whitespace in the table; third of the page is taken by just a few buttons and massive amount of whitespace at the top - please do not take away yet more few rows of space. I too would like to see sticky bottom-of-page controls but this is definitely not the way to do it. I would rather hit the "end" button to find the buttons than pay such a high price for "sticky" controls.

@bluikko commented on GitHub (Apr 7, 2023): I want to state my dislike of the proposed solution in the OP second screenshot **in the strongest of terms**. It reduces the vertical space available to *actual data*, the reason of existence of the page it illustrates, to *less than half* of the browser viewport: ![image](https://user-images.githubusercontent.com/14869000/230542534-103d1519-d0b4-4062-85e5-b2d5525cebd9.png) Here the red lines are the non-data vertical space above and below the actual data. In fact, only _**9**_ lines fit in the table which is totally ridiculous! This screenshot illustrates very well what is wrong with the top part of data pages, but so far the situation is not totally untenable since the bottom part is not "stickied" to take even more useful space for chrome. Taking away all that bottom space as well is like trying to read a poster through a letterbox. Already way too much padding exists - look at the vertical spacing of the table rows as there is as much data as whitespace in the table; third of the page is taken by just a few buttons and massive amount of whitespace at the top - please do not take away yet more few rows of space. I too would like to see sticky bottom-of-page controls but this is definitely not the way to do it. I would rather hit the "end" button to find the buttons than pay such a high price for "sticky" controls.

adam commented

@PieterL75 commented on GitHub (Apr 7, 2023):

I think you are misinterpreting the image. The whole yellow block will scroll up and down.

Besides that, the current PR I submitted, took a different approach. It will just stick the buttons at the bottom when scrolling..
Please feel free to run the PR in a lab and review

@PieterL75 commented on GitHub (Apr 7, 2023): I think you are misinterpreting the image. The whole yellow block will scroll up and down. Besides that, the current PR I submitted, took a different approach. It will just stick the buttons at the bottom when scrolling.. Please feel free to run the PR in a lab and review

adam commented

@bluikko commented on GitHub (Apr 7, 2023):

I realize that from the top part only the topmost piece is sticky in addition to the bottom sticky.
It does not change the fact that only 9 rows fit in the page initially. Some more rows vertically will be displayed after scrolling down. I opened a new issue about the fact that vertically two thirds (!!) of the data tables is whitespace.

@bluikko commented on GitHub (Apr 7, 2023): I realize that from the top part only the topmost piece is sticky in addition to the bottom sticky. It does not change the fact that only 9 rows fit in the page initially. Some more rows vertically will be displayed after scrolling down. I opened a new issue about the fact that vertically two thirds (!!) of the data tables is whitespace.

adam commented

@PieterL75 commented on GitHub (Apr 7, 2023):

I tend to zoom the page to 80% to get more data on it..

This how the current PR looks like. The buttons stick at top/bottom

@PieterL75 commented on GitHub (Apr 7, 2023): I tend to zoom the page to 80% to get more data on it.. This how the current PR looks like. The buttons stick at top/bottom ![netbox_issue9386](https://user-images.githubusercontent.com/74899468/230592970-8e659989-59f8-4168-b9fb-43f9181fd379.gif)

adam commented

@github-actions[bot] commented on GitHub (Aug 1, 2023):

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. NetBox is governed by a small group of core maintainers which means not all opened issues may receive direct feedback. Do not attempt to circumvent this process by "bumping" the issue; doing so will result in its immediate closure and you may be barred from participating in any future discussions. Please see our contributing guide.

@github-actions[bot] commented on GitHub (Aug 1, 2023): This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. NetBox is governed by a small group of core maintainers which means not all opened issues may receive direct feedback. **Do not** attempt to circumvent this process by "bumping" the issue; doing so will result in its immediate closure and you may be barred from participating in any future discussions. Please see our [contributing guide](https://github.com/netbox-community/netbox/blob/develop/CONTRIBUTING.md).

adam commented