problem with layout grid since update

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: 305
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

problem with layout grid since update

Post by crispy68 » Tue Mar 27, 2018 10:50 pm

Hey Pablo,

I had a website I was working on that was working perfectly prior to the recent update. Now, i'm having an issue with the layout grid with fixed height and flexbox. Unfortunately, I didn't realize there was a problem until I republished it and uploaded it to the server and wrote over the working version online. Also, I did not even change anything with the grid before I uploaded it again.

What is happening is this: I've set the background of a grid column to an image with fixed height and use flexbox. Before the image showed up fine in each breakpoint. However now, it only shows up in default view and then disappears in the BP's.

Here's a sample project of just the grid (with images included): http://www.wizbangwebdesign.com/demo/grid-problem.zip

Simply preview it and you will see the issue. Like i said it worked perfectly up until I updated yesterday.

as a note, I have another project I've used something similar and now it is not working. :(

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

Re: problem with layout grid since update

Post by crispy68 » Wed Mar 28, 2018 1:09 am

Pablo,

I've looked into it a bit more and I believe the issue might be with the fact it is adding a height value to each BP.

In my example, for column 2 where the image is in the default layout it creates this code:

Code: Select all

#LayoutGrid1 > .col-2{background-color:transparent;background-image:url(../images/andre-owner.jpg);background-repeat:no-repeat;background-position:center center;background-attachment:scroll;background-size:cover;flex-basis:16.66666667%;max-width:16.66666667%;-webkit-align-self:flex-start;align-self:flex-start;text-align:left;}
in the first BP, it adds this code:

Code: Select all

#LayoutGrid1 > .col-2{display:block;flex-basis:16.66666667%;max-width:16.66666667%;height:auto;-webkit-align-self:flex-start;align-self:flex-start;text-align:left;}
The 'height:auto' is the issue. If removed it works as intended.

However, I noticed with the 2nd image in column 6, it is adding an actual height in pixels:

Code: Select all

#LayoutGrid1 > .col-6{display:block;flex-basis:33.33333333%;max-width:33.33333333%;height:684px;-webkit-align-self:flex-start;align-self:flex-start;text-align:left;}
Which makes the 2nd image very large when you decrease the size of the browser. When this height is removed, it works as intended.

I've also noticed that a height value in pixels was given to a column that was set to hidden (and had no objects inside) which was causing a gap to appear between layout grids.

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

Re: problem with layout grid since update

Post by Pablo » Wed Mar 28, 2018 6:35 am

The height property was added based on your previous feedback.
https://www.wysiwygwebbuilder.com/forum ... 59&t=79897

I have updated the layout code in the latest build (3/28/2018).
Please let me know if this fixes the issue.

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

Re: problem with layout grid since update

Post by crispy68 » Wed Mar 28, 2018 10:17 pm

Hey Pablo,

Thanks for trying to work on my previous feedback.

What also noticed last night was that the height it was assigning was the height of the entire layout grid and not just the row height. Since i'm using the 'custom' overflow property, when the first layout grid row wraps to the next row it basically doubles the height of the layout grid even though the rows are the same in height. So in design it looks like the row is only 300px high but it would double it to 600px (entire grid top to bottom).

Anyway...I will download the update and check it out and report back.

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

Re: problem with layout grid since update

Post by crispy68 » Thu Mar 29, 2018 12:36 am

Hello Pablo,

Yes, the update fixed the previous issue I was having and it is back to the way it was. However, it appears that my suggestion in the other thread is not working or possible?

I did some tinkering and I'm wondering if the solution is to add the height to the whole layout grid versus the columns. In the example I sent you, I went in and changed the padding on some of the objects in the 1366px BP to make the total height of the layout grid 232px (it is 314px in default view). You can do this yourself as well.

When previewed, it generates the following CSS code for the default view:

Code: Select all

#LayoutGrid1 > .col-1,#LayoutGrid1 > .col-2,#LayoutGrid1 > .col-3,#LayoutGrid1 > .col-4,#LayoutGrid1 > .col-5,#LayoutGrid1 > .col-6,#LayoutGrid1 > .col-7,#LayoutGrid1 > .col-8{-webkit-flex:0 0 auto;flex:0 0 auto;height:314px;}
As you can see, the default height is set at 314px which is correct. However, there is no height attribute set in the same section of code for the bp's. In the first BP (1366) it generates this:

Code: Select all

#LayoutGrid1 > .col-1,#LayoutGrid1 > .col-2,#LayoutGrid1 > .col-3,#LayoutGrid1 > .col-4,#LayoutGrid1 > .col-5,#LayoutGrid1 > .col-6,#LayoutGrid1 > .col-7,#LayoutGrid1 > .col-8{padding-right:15px;padding-left:15px;}
There is no height. Since i changed the height in my project to 232px in the 1366bp, I added height:232px in the above code, it now adjusts the entire layout grid to match the height in the workspace.

Thoughts?

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

Re: problem with layout grid since update

Post by Pablo » Thu Mar 29, 2018 6:20 am

I'm sorry, it will be very difficult to implement this without breaking other functionality.
Using fixed height is only useful for simple grids.

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

Re: problem with layout grid since update

Post by crispy68 » Thu Mar 29, 2018 11:57 pm

Thanks Pablo for trying. Understand it may be complicated.

In my test of adding the height value to the entire grid (not the columns) in the CSS Code for each BP, it did work and match what it looks like in design. I can manually add this to the code if needed but was just hoping it could be added in the program.

Post Reply

Who is online

Users browsing this forum: No registered users and 5 guests