Make form/pagination button stick at the bottom

[PieterL75]

NetBox version

v3.2.3

Feature type

Change to existing functionality

Proposed functionality

The pagination and edit button are currently hidden at the bottom of the page. One needs to scroll down to reach the 'Save' or 'Page 5' like buttons.

It would be very handy if those buttons 'stick' to the bottom of the page, and the do not scroll.

Use case

This way, when you only need to edit the 'name' of a device for example, you have that 'Save' button right at hand. Or of you open a prefix list, you have the 'Page 5' button right at hand, rather having to scroll down to navigate

Database changes

None

External dependencies

None

[huntabyte]

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?

[github-actions[bot]]

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.

[arthanson]

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..

[github-actions[bot]]

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.

[PieterL75]

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]

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]

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

[PieterL75]

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

[kkthxbye-code]

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.

[PieterL75]

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]

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

[bluikko]

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.

[PieterL75]

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

[bluikko]

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.

[PieterL75]

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

[github-actions[bot]]

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]]

This issue has been automatically closed due to lack of activity. In an effort to reduce noise, please do not comment any further. Note that the core maintainers may elect to reopen this issue at a later date if deemed necessary.