Improve support for long dropdowns in the mkdocs theme #1967
Conversation
1d19041 to
1712b25
Compare
…cs#1234 This patch allows dropdowns with many items to scroll, rather than overflowing beyond the bounds of the page. Due to the complexities of CSS, this requires nested dropdowns to be given a fixed position which is initialized via JS. In addition, this patch changes the behavior of nested dropdowns to require a click to open (more consistent with the root dropdown, and improves UX on mobile devices). It also fixes the UI on small screens, adding the nested dropdown "in-place" when it's opened and allowing the whole navbar to scroll if there are many items.
1712b25 to
e066f33
Compare
|
I just noted a bug this introduces. If you resize your browser window so that the mobile UI appears, then open a submenu, then resize back to desktop size, the dropdowns no longer work correctly. They are instead hidden in the overflow of the nav, and a scrollbar appears on the far right, requiring you to scroll to view the nav dropdown. Note that this does not occur simply by resizing the browser. You need to actively click on a menu item to open a submenu when in mobile mode. It does not appear to matter if the submenu is closed or left open before exiting mobile mode. However, once you trigger this mode, only a reload brings the correct behavior back. Closing the submenu makes the scroll bar go away, but reopening it brings it back. Presumably, we are not fully exiting mobile mode. However, I don't see any obvious attribute we are failing to change. Tested on Firefox and Chrome. Here are some screenshots: Normal behavior
Problem (note scroll bar)
With scrollbar scrolled (one click of down arrow)
|
Previously, opening a dropdown from the mobile-sized nav header would break things if the user resized the window to be desktop-sized again. This was due to an attempted fix to allow the mobile-sized nav header to scroll when it had many elements.
|
Whoops, fixed in #1971. |
Previously, opening a dropdown from the mobile-sized nav header would break things if the user resized the window to be desktop-sized again. This was due to an attempted fix to allow the mobile-sized nav header to scroll when it had many elements.
This patch allows dropdowns with many items to scroll, rather than overflowing beyond the bounds of the page. Due to the complexities of CSS, this requires nested dropdowns to be given a fixed position which is initialized via JS.
In addition, this patch changes the behavior of nested dropdowns to require a click to open (more consistent with the root dropdown, and improves UX on mobile devices). It also fixes the UI on small screens, adding the nested dropdown "in-place" when it's opened and allowing the whole navbar to scroll if there are many items.