Warning header creates overlap issue with chapter nav #656
Comments
|
Aaaaaaaahhhhhh yep. The warning header is pushing down the That is, the
And its top shouldn't be until below the
I am slow at CSS and would love help on this issue from anyone reading this! |
|
Looks like the root cause is in book.css, line 213. It assumes that the menu bar will always be 50px high, which is true. There's also an implicit assumption that the menu bar is always at the top of the page (and thus the only element for which we need clearance), which isn't true. There's a lot of absolute positioning happening, which makes a fix a bit trickier. Absolute positioning pulls elements out of page flow, so there's no natural adjusting of rendered position based on adjacent elements. A quick-fix bandaid would be to add a class to .page-wrapper.has-warning > .nav-chapters {
top: 120px; /* add height for warning content & margin */
} Time permitting, I'll send a PR with this fix. It is only a bandaid though. I gotta think about what a more resilient fix would look like. |
|
A band-aid is fine; this is not a permanent heading anyway.
…On Tue, May 2, 2017 at 11:12 AM, ♥ Jeremy! ***@***.***> wrote:
Looks like the root cause is in book.css, line 213. It assumes that the
menu bar will always be 50px high, which is true. There's also an implicit
assumption that the menu bar is always at the top of the page (and thus the
only element for which we need clearance), which isn't true.
There's a lot of absolute positioning happening, which makes a fix a bit
trickier. Absolute positioning pulls elements out of page flow, so there's
no natural adjusting of rendered position based on adjacent elements.
A quick-fix bandaid would be to add a class to .page-wrapper when a
warning is going to be included inside <header> that would up the value
of top for .nav-chapters to 120px (menu bar + header + header top margin).
.page-wrapper.has-warning > .nav-chapters {
top: 120px; /* add height for warning content & margin */
}
Time permitting, I'll send a PR with this fix. It is only a bandaid
though. I gotta think about what a more resilient fix would look like.
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#656 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/AABsiltu1R5OncW_4190Au9BPpTMT_qyks5r10fGgaJpZM4NMYv6>
.
|
|
Well if you don't mind a band-aid, I have a quick "fix" that is hackier than @jnf's suggestion but might have a lower footprint. I'll send a PR and let you folks decide. |
The status class, `.has-warning`, provides a hook for other content to adjust their positioning. It's leveraged to push down the absolutely positioned chapter navs far enough so that they clear both the warning message and the icons in the header bar. Fixes rust-lang#656.
|
The only wiggly bit with a z-index fix (#668) is that it turns the "dead space" between and surrounding the sidebar and theme toggles into a clickable hot zone. The chapter nav is positioned just below, so missing the icon by a pixel will navigate users away from the page. Not a huge deal, but potentially frustrating to readers. |
|
If @jnf's PR works in all cases (ie. it doesn't move down the chapter navigation when the warning is not displayed), then we should use his because it is a better solution 😃 |
Steps to Reproduce:
I initially thought that the right combination of collapsing the nave and showing the theme drop-down would cause the nav to actually be above the other controls, but I really don't know if that is just the case or if my click was just slightly off.
Browser: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:53.0) Gecko/20100101 Firefox/53.0
mdbook: mdbook v0.0.22-pre (435682e)
The text was updated successfully, but these errors were encountered: