Skip to content
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
Closed

Padding or borders on nested elements causes breakage #118

EnMod opened this issue May 8, 2015 · 15 comments

Comments

@EnMod
Copy link

@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
Copy link
Contributor

@dmitrykiselyov dmitrykiselyov commented May 8, 2015

@EnMod can you show your code?

@EnMod
Copy link
Author

@EnMod 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
Copy link
Contributor

@subpixelch subpixelch commented May 8, 2015

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

@EnMod
Copy link
Author

@EnMod EnMod commented May 9, 2015

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

@dmitrykiselyov
Copy link
Contributor

@dmitrykiselyov 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
Copy link

@abass 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
Copy link

@AleksejDix 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
Copy link
Author

@EnMod 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
Copy link
Contributor

@corysimmons corysimmons commented May 11, 2015

Sorry I was out of town all this past week.

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

@mindreframer
Copy link

@mindreframer 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
Copy link
Contributor

@corysimmons corysimmons commented Jan 4, 2016

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

@peterramsing
Copy link
Owner

@peterramsing 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
Copy link

@mindreframer 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
Copy link
Owner

@peterramsing peterramsing commented Jan 4, 2016

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

@peterramsing
Copy link
Owner

@peterramsing 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
8 participants
You can’t perform that action at this time.