Month: August 2014

These are not the widths you were looking for – CSS media query max-width

Today I encountered something very unexpected. I was using basic CSS media queries.

@media (max-width:1205px) {

[role=main] > .row
    {
        padding-left: 8px;
    }
}

And I have Firebug open because my rows do not have padding-left applied. Firebug is clearly telling me the width of HTML is 1199px well under 1205px.

At this point I’m outright stumped. I copy my CSS outside the media query thinking my selector usage is somehow faulty, and it works fine.

I take to the googles and locate issue with CSS media queries(scrollbar) on stackoverflow. This question acknowledges that browsers treat the scrollbar differently for whether it’s included in the width of the viewport. So when Firebug was reporting 1199px for the width of <html> it was not adding 15px for the scrollbar for a total of  1214px greater than my max-width.

these are not the widths you were looking for

The solution to this problem is mqGenie. Effectively this is a polyfill that normalizes browsers behavior in regards to scrollbars and updates your media queries to account for the scrollbar width if neccessary. It likely has the caveat that it will only work on stylesheets that are served inside the same origin policy.

jQuery Trunk8

Have you written an app where you have an unknown length text block that’s going to go into a grid layout. Perhaps the description to an event? You expect most descriptions to be 1 or 2 lines max, but then someone goes and copy-pastes a word document into your description field.

A great solution to this problem is a jquery plugin Trunk8. You can checkout the demos or view the source on github.

Ultimately trunk8 takes a very long textblock and based on configurable settings will truncate it to … ellipses. The great thing about trunk8 is that it actually analyzes the element that contains the text and bases it’s calculations on actual screen space. It doesn’t do a naive attempt based on number of characters. It also supports html, this was key for me. Using it to truncate a long markdown description block when in general it will consistent of 1 or 2 lines.