CSS coping badly with increased page-zoom

[rowanthorpe]

When first running the manager my browser's default zoom-level caused the header to expand to two lines (the dropdown box wrapped), which is not such a problem by itself. However, the first line of each page was then being masked by the header, rather than being pushed down as well (obviously some absolute positioning has been used in CSS). As a side-note because it was the first I'd seen of the layout I didn't know how it should look, so it took a while to realise it was just a problem with zoom-levels...

[barryo]

We're using Twitter Bootstrap pretty much as is with very few minor modifications. That said, this issue is probably caused by:

https://github.com/inex/IXP-Manager/blob/master/public/css/900-ixp-manager.css#L5

Suggestions on fixing / improving this are welcome.

We've generally worked around this by reducing the number of menu items / using large enough screens as the number of admins are small. The member / customer portal has a small width requirement and consequently this should not be an issue there.

[rowanthorpe]

It seems that if the "body" top-padding is static and Bootstrap's header resizes itself there will always be this problem to some degree, so I guess other than rewriting large sections of Bootstrap(!) the only way to resolve it (albeit not too elegantly) is by dynamically setting the body-top-padding via jquery. I found code that does something equivalent here http://stackoverflow.com/questions/10901494/css-set-width-of-one-div-based-on-another but am not yet familiar enough with IXP-Manager's codebase to know where exactly is the sensible place to insert such code. Obviously the difference from that code would be on load() rather than on click(), padding-top instead of width, etc...

[barryo]

I should have said suggestions on fixing / improving this that don't involve JS hacks are welcome ;)

The design is standard Bootstrap and IXP Manager won't be the first to have this issue. It will most likely have been solved by others already and, if not, the best course of action is possibly a bug report / query to the Bootstrap project.

I'll leave this open and follow it up when I have some time.

[barryo]

If you do want to put a JS hack on your own fork, after this line would be the place for it:

https://github.com/inex/IXP-Manager/blob/master/public/js/900-ixpmanager.js#L44

[rowanthorpe]

Understood (hence the wording "albeit not too elegantly") :-D Although I suspect if such a behaviour has survived in Bootstrap for this long, it's probably deliberate, and not likely they will change such a fundemental behaviour(?) even if patches are provided. Thanks for the workaround-location-pointer.

[rowanthorpe]

After doing far more reading on the subject than I ever wanted to, I've come to the conclusion that the only road to an "elegant" solution to this will be when browser implementation of CSS3 flexbox is widespread enough to be counted on. Until then it seems everything I find that could "cut it" involves the word "hack" more often than is comfortable... Of course I'd love for my conclusion to be wrong. I like surprises.

[barryo]

In the end, it was actually very easy:

@media ( max-width: 1245px ) {
    body {
        padding-top: 100px;
    }
}

A CSS selector that is only used if the width of the viewport is <1245 pixels.

Confirmed working in latest Chrome and Firefox for both zooming and increasing / decreasing window size.