Freeway needs to do some catching up!
OK - my gotcha for this week. I have a responsive site I’m working on, and the client, not unreasonably, has asked for a bit of space between an image and the descriptive text.
There are two inline boxes on the page, both set to a width of 50%. Things fit in the window (images displayed using % widths), text flows nicely.
I added some padding to the left of the HTML item displaying the text. Freeway now calculates the width at something like 47.92% (in the Dimensions part of the Inspector Palette). Items are still displayed next to each other. A preview, though, shows that the text item has been pushed below the item that contains the image! There’s a nasty reflow somewhere.
I had a dig around in Safari’s item inspector, and I found that it is computing the width of this element as 460.03125px. The width of the other is 480px (the page width is 960 pixels - but ultimately flexible), so add on the 20px padding, and we have a width of 480.03125 for the item with padding! The total width of the content is 0.03125 too wide, and that forces a reflow.
To get around this, I am using the CSS calc function to get the browser to work out the width:
width: calc( 50% - 20px );
I have to enter this in the Item>Extended DIV Style dialog window.
Doing this correctly gives me a width of 460px for the element, and there is no reflow.
I could change the % width to 47% in Freeway, but as you change the width of the window, rounding errors creep in and things reflow in ways that are bad.
Right now, Freeway does not directly support using the calc() css function directly, so you need to add it as I noted above, or include it in some kind of sidecar .css file with a !important flag, just to be sure.
As an aside, setting a margin to do this has similar effects. Both margin and padding consume the width of the item applied to in varying ways.
freewaytalk mailing list
email@hidden
Update your subscriptions at: