CSS coping badly with increased page-zoom about ixp-manager HOT 7 CLOSED

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.

from ixp-manager.

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

from ixp-manager.

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.

from ixp-manager.

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

from ixp-manager.

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.

from ixp-manager.

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.

from ixp-manager.

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.

from ixp-manager.