New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Padding or borders on nested elements causes breakage #118

Closed
EnMod opened this Issue May 8, 2015 · 15 comments

Comments

Projects
None yet
8 participants
@EnMod

EnMod commented May 8, 2015

After trying multiple times to pad/border elements that have been nested, the layout always ends up breaking. Is the solution to add .wraps or similar to wrap everything I want to pad/border?

@dmitrykiselyov

This comment has been minimized.

Show comment
Hide comment
@dmitrykiselyov

dmitrykiselyov May 8, 2015

Contributor

@EnMod can you show your code?

Contributor

dmitrykiselyov commented May 8, 2015

@EnMod can you show your code?

@EnMod

This comment has been minimized.

Show comment
Hide comment
@EnMod

EnMod May 8, 2015

@dmitrykiselyov Sure, will do so in about an hour once I am back at a computer. I'll edit this comment with the code.

EDIT: Here's the problematic part of my Jade template when it wasn't working:

nav
  #content

article
  #content

And the offending Stylus:

nav
  lost-column 1/4
  padding 4rem

article
  lost-column 3/4
  padding 4rem

<nav> appears vertically above <article> in this setup. However, by including .wraps in the right places and applying padding to the wraps instead, like so:

nav
  .wrap
    #content

article
  .wrap
    #content
nav
  lost-column 1/4
  .wrap 
    padding 4rem

article
  lost-column 3/4
  .wrap
    padding 4rem

...this fixes the problem, and <article> then appears to the right of <nav> as expected. in the case of my issue, padding is interchangeable with borders of any kind.

EnMod commented May 8, 2015

@dmitrykiselyov Sure, will do so in about an hour once I am back at a computer. I'll edit this comment with the code.

EDIT: Here's the problematic part of my Jade template when it wasn't working:

nav
  #content

article
  #content

And the offending Stylus:

nav
  lost-column 1/4
  padding 4rem

article
  lost-column 3/4
  padding 4rem

<nav> appears vertically above <article> in this setup. However, by including .wraps in the right places and applying padding to the wraps instead, like so:

nav
  .wrap
    #content

article
  .wrap
    #content
nav
  lost-column 1/4
  .wrap 
    padding 4rem

article
  lost-column 3/4
  .wrap
    padding 4rem

...this fixes the problem, and <article> then appears to the right of <nav> as expected. in the case of my issue, padding is interchangeable with borders of any kind.

@subpixelch

This comment has been minimized.

Show comment
Hide comment
@subpixelch

subpixelch May 8, 2015

Contributor

Do you use lost in flex-mode? If so have a look at this: #119

Contributor

subpixelch commented May 8, 2015

Do you use lost in flex-mode? If so have a look at this: #119

@EnMod

This comment has been minimized.

Show comment
Hide comment
@EnMod

EnMod May 9, 2015

@subpixelch No flex here, but thanks for the heads up.

EnMod commented May 9, 2015

@subpixelch No flex here, but thanks for the heads up.

@dmitrykiselyov

This comment has been minimized.

Show comment
Hide comment
@dmitrykiselyov

dmitrykiselyov May 9, 2015

Contributor

They (nav and article) must have a parent (to know who is the last child and remove margin-right) and the parent must have the clearfix (because of float). Id must have a unique name!

Jade

.content
  nav 
    #content1

  article
    #content2

Stylus

.content
  lost-utility clearfix

nav
  lost-column 1/4
  padding 4rem

article
  lost-column 3/4
  padding 4rem
Contributor

dmitrykiselyov commented May 9, 2015

They (nav and article) must have a parent (to know who is the last child and remove margin-right) and the parent must have the clearfix (because of float). Id must have a unique name!

Jade

.content
  nav 
    #content1

  article
    #content2

Stylus

.content
  lost-utility clearfix

nav
  lost-column 1/4
  padding 4rem

article
  lost-column 3/4
  padding 4rem
@abass

This comment has been minimized.

Show comment
Hide comment
@abass

abass May 9, 2015

Yep, and you don't have to do lost-utility clearfix if you don't want:

.content
   lost-center: 1140px

Will add in the clearfix and display: flex and everything for you. Sometimes just using the utility clearfix is good, but most of the time I find myself just using the lost-center.

abass commented May 9, 2015

Yep, and you don't have to do lost-utility clearfix if you don't want:

.content
   lost-center: 1140px

Will add in the clearfix and display: flex and everything for you. Sometimes just using the utility clearfix is good, but most of the time I find myself just using the lost-center.

@AleksejDix

This comment has been minimized.

Show comment
Hide comment
@AleksejDix

AleksejDix May 9, 2015

why aren't you using the gutter variable.

.foo
  lost-center 1140px 4rem 

and then give margin to the children elements

http://corysimmons.github.io/lost/

AleksejDix commented May 9, 2015

why aren't you using the gutter variable.

.foo
  lost-center 1140px 4rem 

and then give margin to the children elements

http://corysimmons.github.io/lost/

@EnMod

This comment has been minimized.

Show comment
Hide comment
@EnMod

EnMod May 10, 2015

@dmitrykiselyov Apologies...I should mention that nav and article are children of a section within my Jade.

@AleksejDix I wasn't using the gutter variable like that because I didn't grasp exactly how it works just yet, and didn't think to use lost-center with 100% (since I wanted full-width) instead of just throwing in lost-columns like I did. @dmitrykiselyov 's Jade markup with the following stylus gives the expected results:

padstuff = 4rem

section
  lost-center 100% padstuff

nav
  lost-column 1/4
  margin-top padstuff

article
  lost-column 3/4
  margin-top padstuff

Thanks so much for your help, everyone. I've still got much to learn it seems :)

EnMod commented May 10, 2015

@dmitrykiselyov Apologies...I should mention that nav and article are children of a section within my Jade.

@AleksejDix I wasn't using the gutter variable like that because I didn't grasp exactly how it works just yet, and didn't think to use lost-center with 100% (since I wanted full-width) instead of just throwing in lost-columns like I did. @dmitrykiselyov 's Jade markup with the following stylus gives the expected results:

padstuff = 4rem

section
  lost-center 100% padstuff

nav
  lost-column 1/4
  margin-top padstuff

article
  lost-column 3/4
  margin-top padstuff

Thanks so much for your help, everyone. I've still got much to learn it seems :)

@EnMod EnMod closed this May 10, 2015

@corysimmons

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons May 11, 2015

Contributor

Sorry I was out of town all this past week.

* { box-sizing: border-box; } should fix this.

Contributor

corysimmons commented May 11, 2015

Sorry I was out of town all this past week.

* { box-sizing: border-box; } should fix this.

@mindreframer

This comment has been minimized.

Show comment
Hide comment
@mindreframer

mindreframer Jan 4, 2016

@corysimmons thank you so much! Could we put this information into Readme? (@peterramsing) I have spent around 5 hours trying to understand/fix this issue... This could be easily mitigated by having an FAQ / Gotchas section in Readme.

Thx for the grid system, btw!

mindreframer commented Jan 4, 2016

@corysimmons thank you so much! Could we put this information into Readme? (@peterramsing) I have spent around 5 hours trying to understand/fix this issue... This could be easily mitigated by having an FAQ / Gotchas section in Readme.

Thx for the grid system, btw!

@corysimmons

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons Jan 4, 2016

Contributor

A gotcha's section in the README or Wiki might be a good idea.

Contributor

corysimmons commented Jan 4, 2016

A gotcha's section in the README or Wiki might be a good idea.

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Jan 4, 2016

Owner

@mindreframer Sorry to hear about the 5 hours on this. I'm working on getting some new documentation for Lost ASAP. I think with this and other things I've heard, it's time to spend some serious time on it and sooner than later. See #224

Owner

peterramsing commented Jan 4, 2016

@mindreframer Sorry to hear about the 5 hours on this. I'm working on getting some new documentation for Lost ASAP. I think with this and other things I've heard, it's time to spend some serious time on it and sooner than later. See #224

@mindreframer

This comment has been minimized.

Show comment
Hide comment
@mindreframer

mindreframer Jan 4, 2016

@peterramsing thanks! yeah, a real documentation is great, altough it might take couple weeks (months?) until it is decided and implemented. maybe just make a quick change in the readme for now and dont think about it anymore? your call. ;)

there is no harm in doing so.
Cheers!

mindreframer commented Jan 4, 2016

@peterramsing thanks! yeah, a real documentation is great, altough it might take couple weeks (months?) until it is decided and implemented. maybe just make a quick change in the readme for now and dont think about it anymore? your call. ;)

there is no harm in doing so.
Cheers!

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Jan 4, 2016

Owner

@mindreframer I don't disagree. Will have something updated soon.

Owner

peterramsing commented Jan 4, 2016

@mindreframer I don't disagree. Will have something updated soon.

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Jan 5, 2016

Owner

@mindreframer I added this for the time being: https://github.com/peterramsing/lost#gotchas

Thanks and feel free to provide feedback. 😄

Owner

peterramsing commented Jan 5, 2016

@mindreframer I added this for the time being: https://github.com/peterramsing/lost#gotchas

Thanks and feel free to provide feedback. 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment