flexboxgrid
flexboxgrid copied to clipboard
kristoferjoseph
lowest response-step overflow issue
On the lowest response-step, when the container becomes fluid, the rows are forcing overflow on the x-axis, since they have negative margin and the container doesn't compensate that through padding, as it does in i.e. bootstrap. It might not appear a problem to many, since the user agent stylesheet gives the body a margin of 8px. Often you want to remove this margin to allow for fullwidth blocks. Example: http://plnkr.co/edit/GjjsrOFpz6IpOkeMzHFn
Would a fix for this be to only apply the negative margins on .row above the smallest breakpoint?
I suppose that would not work, actually. The row would need to know at what point its columns stopped having margins, so it would need responsive classnames itself, like row-md. Alternatively (as in your example) one can always supply a col-xs fallback for the columns to ensure they always have margins.
I am not quite sure what you mean with your last sentence. As you see in the plunker above, supplying a col-xs doesn't solve the problem.
Maybe I don't understand the problem - I thought that the col-xs class did solve the problem, as I'm not seeing the content overflowing the body at smaller viewport sizes in the plunker. The problem as I was observing it was that elements with, for example, a col-md class would lose their horizontal margins at the sm breakpoint size, but that supplying a col-xs class would ensure they would always have those margins, making up for the negative margins on the row. Perhaps I'm missing the point?
Sorry, I was not specific enough. Yes, the .col-xs adds the correct padding and all of .col-xs's Content is inside the view, not overflowing the body. However .row still has a negative margin and overflows the body. Thus, if the body of the document, or any other element containing the .row, does not have enough margin or padding of its own, a scrollbar appears. Usually you would not see this, because the user agent stylesheet of many browsers adds enough margin to the body. The plunker shows, how the scrollbar appears when you make the window small enough for mobile view (tested in FF and Chrome).
The solution would probably be to remove the negative margins of the .row on mobile and somehow compensate inside the .col-xs's. For a .col-xs-12, like in the example that would be no problem, it only get's complicated when aligning several .col-xs's next to each other, since you want the gutter.
What's interesting about it is that it's not just a problem on mobile, but whenever the row consumes the full width of the viewport (in the plunker, it seems to happen for me as well around 1020px wide). I doubt that there'd be a responsive solution to it. Perhaps if you know that your body doesn't have the requisite 1rem padding, you can put overflow-x: hidden on the container (the row's parent element).
Okay, but that won't prevent the mobile page from scrolling to the sides when you use your fingers and don't go 100% straight to the bottom. It's a lesser inconvenience, but we should find a way to fix it. Also it might have side effects in some cases.