Flexbox embedded in Layout Grid

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
courriere
 
 
Posts: 26
Joined: Sun Apr 30, 2017 7:16 pm

Flexbox embedded in Layout Grid

Post by courriere » Wed Nov 25, 2020 2:33 pm

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

User avatar
Pablo
 
Posts: 22598
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Flexbox embedded in Layout Grid

Post by Pablo » Wed Nov 25, 2020 3:01 pm

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.

User avatar
crispy68
 
 
Posts: 1271
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Flexbox embedded in Layout Grid

Post by crispy68 » Wed Nov 25, 2020 3:49 pm

@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.

courriere
 
 
Posts: 26
Joined: Sun Apr 30, 2017 7:16 pm

Re: Flexbox embedded in Layout Grid

Post by courriere » Wed Nov 25, 2020 6:01 pm

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.

User avatar
Pablo
 
Posts: 22598
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Flexbox embedded in Layout Grid

Post by Pablo » Wed Nov 25, 2020 6:11 pm

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

User avatar
crispy68
 
 
Posts: 1271
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Flexbox embedded in Layout Grid

Post by crispy68 » Wed Nov 25, 2020 6:18 pm

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.

courriere
 
 
Posts: 26
Joined: Sun Apr 30, 2017 7:16 pm

Re: Flexbox embedded in Layout Grid

Post by courriere » Wed Nov 25, 2020 6:30 pm

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.

User avatar
Pablo
 
Posts: 22598
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Flexbox embedded in Layout Grid

Post by Pablo » Wed Nov 25, 2020 6:32 pm

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.

courriere
 
 
Posts: 26
Joined: Sun Apr 30, 2017 7:16 pm

Re: Flexbox embedded in Layout Grid

Post by courriere » Thu Nov 26, 2020 7:41 am

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

And thanks for your wonderfull support and software.

Post Reply