free-style lay-out column widths

I created a two-column layout and want to have another 2-column layout inside the first (wider) column. So I use 'add layout', my only option then is free-style, and I choose two columns (with or without fixed space, I've tried both). All is well.

But: I don't want the columns to have the same width, so I unlock them and use the slider, and lo and behold: they end up one below the other. Whatever sizes I choose. Sometimes it looks as if they are side by side but when I save the layout one is again below the other.

This happens when there is no content at all, so nothing that could force the columns to a specific width.

Oh, forgot: I'm using the Elemental theme.

What do I do wrong, is there something I missed?

View Replies:
MrKDilkington replied on at Permalink Reply
Hi Yola,

I tried to recreate what you are describing without success.

Can you take a screenshot before and after you save the layout, please.
Yola replied on at Permalink Reply
Hi Mr K,

I thought I'd make a brief video to show you what I want, what I'm doing and what happens.

Here it is

For some reason the sound didn't work but no matter: you can see I wanted two columns of unequal width side by side and they end up below each other.

I'm sure it must be something small and simple but I can't think what it is...

Thank you for your help.

MrKDilkington replied on at Permalink Reply
Have you added any CSS styles to your theme that could be conflicting/overriding the CSS of the concrete5 editing interface?

If you can't find the cause of the problem, there will be a new 5.7.5 feature that should address it.

The feature will allow nesting custom layouts. When adding a custom layout within a custom layout, you will not be limited to Free-Form Layout only.

"Add Nested Grid Support to Grid Framework #1715"
silentdrummer replied on at Permalink Reply
i'm experiencing exactly the same problem on 5.7.5. i do have custom css but i don't think it's conflicting. i'll try to fix this by twaking with the custom css. in case you have experience on how to fix this, please let me know!

silentdrummer replied on at Permalink Reply
I seem to have found the problem! it has something to do, with how concrete5 calculates the with of each column (which is apparently set individually via css and IDs) and only appears, when the width of the outer column is not an integer, but a float.

my example:
<div class="col-sm-5">
    <!-- outer column -->
    <div class="ccm-layout-column-wrapper">
        <div class="ccm-layout-column" id="ccm-layout-column-29">
            <!-- inner column 1-->
        <div class="ccm-layout-column" id="ccm-layout-column-30">
            <!-- inner column 2-->

the outer column has a width of 457.5
the inner column 1: 174
the inner column 2: 284

as you can see, the sum of the inner columns is bigger then the width of the outer column forcing the layout to break.

when i change the outer column to end up in a integer width, the inner layout works. a simple "floor(outer.with)" before the calculation of the inner width would do the trick.

silentdrummer replied on at Permalink Reply
i created this pull request on github, which should fix this: