search

davidrleonard / test-issue-mover

0 stars 0 forks source link

Padding on layouts within layouts #1

Open davidrleonard opened 9 years ago

davidrleonard commented 9 years ago

Issue by maya Tuesday Dec 23, 2014 at 18:42 GMT Originally opened as https://github.com/codeforamerica/codeforamerica.org/issues/843

When we have two layouts wrapped inside each other, the padding of the outer layout is not visible. There is supposed to be 3em padding above and below the outer container, but when there is an inner container you don't see that padding and it's not in the middle. Is this behavior intended? /cc @maban

screen shot 2014-12-23 at 10 35 08 am

davidrleonard commented 9 years ago

Comment by maban Tuesday Dec 23, 2014 at 21:53 GMT

Hmm, that does look wrong. Adding overflow: hidden; to the container makes it show up again (but that's not something I'd advise adding to the CSS). Are you having issues like this with anything on the site?

davidrleonard commented 9 years ago

Comment by maya Tuesday Dec 23, 2014 at 21:58 GMT

Yes, for example this 3 column layout on the government page which was "fixed" by adding padding-bottom via inline CSS (not-advised either) to the outside slab container. But pretty much anywhere you have columns this will show up.

davidrleonard commented 9 years ago

Comment by maban Tuesday Dec 23, 2014 at 22:23 GMT

Eeep, yeah, that's not good.

This is the old "clearfix" bug, and it only shows up if there is no content after the columns. It makes the container invisibly collapse in on itself. So annoying. It used to be you'd have to add some content in the HTML and hide it, but we can fix this by making the container think there is content there using an :after with some empty content in the CSS.

I've pushed this to a separate branch so you can test it out and see if it does the trick. I originally applied it to everything but changed my mind and just added it to the layout-breve and layout-semibreve which are the main wrappers. Make sure the other pages don't look super weird before pushing as it may either double-up padding where there was some added, or make it appear where there wasn't any before.

Fingers crossed this does the trick!

davidrleonard commented 9 years ago

Comment by maya Tuesday Dec 23, 2014 at 22:41 GMT

What a weird bug and cool trick! Good call to leave it on just the main wrappers. @migurski can you verify the fix?