Layout grid issue using flexbox layout

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
User avatar
crispy68
 
 
Posts: 426
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Layout grid issue using flexbox layout

Post by crispy68 » Thu Jan 25, 2018 12:18 am

Hey Pablo,

I have a minor issue with layout grid nested in a layout grid. 6 BP's = Default(1920), 1366, 1024, 768, 480, 360. Here is what I have:

1. created layout grid1: 4 columns 2x4x4x2 - breakpoint=1023px- placed an image in column 3 set to full width - placed 3 text boxes in column 2 with centered text
2. created layout grid2: 3 columns 4x4x4 - breakpoint=0px - place in 2nd column a horizontal line
3. take layout grid2 and insert it into layout grid1 in column 2 underneath the text boxes

the image is taller than the text boxes and line so i want to center the text and line vertically in column 2 so I choose 'use CSS flexbox layout' and set column 2 to center/middle. In each BP, I adjust the columns in layout grid2 (with the line) to look the way i want depending on the BP. I'm basically controlling the overall width of the line. Looks fine in the workspace.

When I preview, in the default, 1366 and 1024 layout, the line is not centered but to the left. It's not adhering to layout grid2's dimensions. When layout grid1 hits the BP and flips to stacking, layout grid2 works correctly there down.

So, for the heck of it, i click 'use CSS flexbox layout' in layout grid2 and preview, now the line in grid2 works as intended in default, 1366 and 1024 but when grid1 flips to stacked mode, the line now extends the full lenght of grid1 and doesnt follow grid2's layout.


This will make more sense if you download this sample file (image included).

http://www.wizbangwebdesign.com/demo/layout-grid.zip

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

Re: Layout grid issue using flexbox layout

Post by Pablo » Thu Jan 25, 2018 8:00 am

If you nest multi layout grids then they should all use the same structure, flexbox or default(bootstrap). Otherwise the nested grid will inherit the wrong styles from the parent grid.

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

Re: Layout grid issue using flexbox layout

Post by crispy68 » Fri Jan 26, 2018 1:50 am

thanks Pablo.

Another question. Since I need to utilize flexbox layout in layout grid1 (main grid), I set layout grid2 (which contains the line) to use flexbox layout also. In layout grid1, I have the breakpoint set at a certain point to flip to stacked mode. However, in layout grid2 I've set the breakpoint to zero as I don't want it to go to stacked mode.

Everything looks and behaves as i want until the layout grid1 goes to stacked mode. When this happens, the line in layout grid2 fills the width of the container even though I have it specified to have 3 equal columns and the line is only in column 2. It's as almost when layout grid1 goes to stacked mode that whatever column layout I have in grid2 becomes 1 column which is the whole grid.

You can see this in the demo from my original post.

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

Re: Layout grid issue using flexbox layout

Post by Pablo » Fri Jan 26, 2018 7:48 am

Unfortunately also in this case the nested grid inherits the styles from the parent grid, so it will have the same column definition.
I will implement a workaround for this in the next update.

Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests