search

backdrop / backdrop-issues

Issue tracker for Backdrop core.
145 stars 40 forks source link

[UX] Fragment identifier target is hidden behind the the admin bar + any sticky table header on the page. #2068

Open klonos opened 8 years ago

klonos commented 8 years ago

Say I want to point somebody from the documentation to a specific part of the UI that supports fragment identifiers like /admin/config/people/permissions#edit-create-url-aliases for example. In this case, the fragment identifier target is scrolled to the top of the browser viewport as expected, but because the admin bar (when set to be sticky at the top of the page) and the sticky header kick in, the specific text is hidden behind them.

This one I'm guessing will be a tough one to break. We'll need to somehow add javascript that overrides the auto-scroll mechanism of the browser (is that even possible? ...in all supported browsers??) and then adds the vertical offset of the admin bar + the sticky table header and scrolls accordingly so that the fragment identifier target is within the actual viewport.

klonos commented 8 years ago

Related:

https://css-tricks.com/hash-tag-links-padding http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo https://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors

laryn commented 5 years ago

I had a similar issue on a site that used Sticky Nav and I ended up adding a negative top margin to the h3 elements that had anchors/ids, as well as an equivalent (positive) top padding. This worked in my case because you couldn't visually see any difference on the h3.

The permissions rows have background color so the extra padding is visible -- and this may not work as nicely...

However I see the css-tricks article actually doesn't call for padding but for setting the actual height of :before to the matching value -- which might work after all in the case you refer to?