www.wysiwygwebbuilder.com

I am trying to upgrade a project from W15 to W16 , and I don’t have the same rendering between the two versions when I use flexbox embedded in a layout grid column.

The width of the flexbox seems to be not correctly set in W16 (not 100% of the column).
The two projects have the same aspect, as I want, but it don’t have the same rendering.
In W16 what we see is not what we get.

If, in W16 version, I set manually a custom style « width : 100% ; » it works fine. I was not obliged in W15.
Example for W15 :
http://dixievaux.synology.me/test/layou ... ist15.html
Example for W16 :
http://dixievaux.synology.me/test/layou ... ist16.html

I can send you the two projects if you want.

Thank you for your help

A flexbox container is not suppose to be inside a layout grid. It was not designed to be used this way, the flex container will be inserted as an inline element because the layout grid uses display:flex (to make vertical alignment possible).
These are two different layout systems.

However, if you can share a demo project your project then I will investigate if what you are trying to do can be made possible in a future update.

@Pablo,
I can confirm this is correct as I have noticed it myself working on a recent project where I to had to add 'width:100%' to the css but I only notice it when setting the grid to 'flexbox'. If the grid is set to 'default' it works. The issue is in WB15 the grid column is set to 'display:block' and in WB16 it is now set to 'display:flex'.

I believe a simple solution is to possibly add a 'full width= true/false' to the flex container. If true, then 'width=100%' is added. This would be similar to what text and images have now.

WB15 & WB16 demos here.

As for using flex containers in grids, I have done this now for some time and never had any issues with it. Since a flex container is just a <div> it is controlled by the grid properties like any other <div>. What's inside the flex container is controlled by flex properties. They work great together.

Thank you Pablo and Crispy68 for your reply

Here are the two projects :
http://dixievaux.synology.me/test/flexb ... dded16.wbs
http://dixievaux.synology.me/test/flexb ... dded15.wbs

Flexbox embedded is allowed by the editor, and the display is as expected.
Yes it works with Grid System : default but it don't permit a middle alignment.

Thanks, I will investigate if this option can be added.

Yes it works with Grid System : default but it don't permit a middle alignment.

What doesnt permit a middle alignment? The contents inside the flex container or the flex containers themselves inside the grid? For the layout grid itself to allow for middle alignment, you must set it to flexbox in the grid. In default, there is no middle alignment.

Yes it's right, but you may have an another column in the layout grid with a text box or something else not in a flexbox ! I have the case in a project and it works good with W15.

Flexbox embedded is allowed by the editor, and the display is as expected.

If you look closely in the editor then you will notice that the flex container is embedded as an inline element, it is not full width. It just looks that way because you made it almost as wide as the layout grid.
So, if you make the page width in the editor wide enough then the flex containers will be on the same row. This is because in Wb16 the elements are 'flex' elements, unlike in WB15 where the elements were blocks elements, which was not correct.

crispy68's suggestion to add a 'full width' property is probably the best solution because then the flex contianer can be used in the lay grid without have to go back to the incorrect behavior of WB15.

OK, Pablo, I already add "width : xx%" and it resolves the problem.

And thanks for your wonderfull support and software.