Rows breaks in a funny way

Beta
#1

Hi.

Unless i’ve misunderstood how the new flex layout is working, might i’ve found a little error.

I’ve made a row with 3 columns, and horisontal gap of 2 rem.
In edit it looks like this:
And live, it looks like this:
But then i made a new row, 1/3 + 2/3.
In edit it looks like this:
And live it looks like this:
As far as I think, the 2/3 column should be streched to align the row above it.

Cheers!

#2

Looks like the open sidebar is making the preview inside a different breaking point than what you see live. Usually on 15’’ screen and narrower.

I find this being a problem too. With the new responsive options there will be more need for the true preview inside the Content builder.

If the Sidebar had absolute positioning, then the preview would be correct, but it would create different problems as part of the content would be hidden most of the time. Personally that would work better for me, but I imagine most users wouldn’t agree.

A partial solution is to have the sidebar undocked, and use the keyboard shortcut CTRL(CMD)+Shift+E to show/hide it.

#3

Thanks that helps in edit mode.
But it still won’t expand over 2/3 in live view.
http://hs.bymarkvig.dk/book-tid-her/

#4

Hi @rbitfoto,

Look for the Grow checkbox under the Row’s setup box. We have it off by default so the columns always adhere to the chosen Column Layout. But this is flexbox, so we can definitely fill up the remaining space. :slight_smile:

#5

Thanks.

I tried that, by it makes it 50/50 in live mode.


Flexbox layout is off on cols.

#6

Ok, I see what you’re saying. So this new row is for the most part a flexbox abstraction. The Row Layout control applies a flex-basis to each item and does not grow by default. Grow tells items to fill the available space within the wrapping context (the final unfilled row). Unfortunately, we can only make this Grow setting apply to all the columns or none. The produced style is actually applied to the Column, but it would be strange to have a Grow option on every column that doesn’t do anything under the majority of circumstances.

Fortunately, there is a way to override it in special cases like these: Inspect the second to last Column (the one we don’t want to grow and add this under Element CSS:

$el {
  flex-grow: 0!important;
}

That will make the Column follow it’s flex-basis which is 33.33%.

#7

Thanks.
Not the solution I hoped for… :slight_smile:

I’ll try it.

#8

I understand. It’s kind of an in-between solution. This new Row element was primary intended for single rows of content, but the fact that it supports multiple rows with breaks is a nice bonus from flexbox. Another way to get more control would be creating more Rows inside the Section.