Floating Layer Height Change and Layout Grid

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
protectourlands
 
 
Posts: 513
Joined: Sat May 24, 2008 2:16 am
Contact:

Floating Layer Height Change and Layout Grid

Post by protectourlands » Sun Nov 03, 2019 3:55 am

I have a floating layer set full width, Background: image, contained. The image scales nicely at all widths with the height changing as it narrows.

I have a layout grid below it. How do I get the layout grid to float upward to the changing height of the floating layer as it gets smaller as the page narrows?

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

Re: Floating Layer Height Change and Layout Grid

Post by Pablo » Sun Nov 03, 2019 7:54 am

The layout grid should automatically float. This is default behavior.

User avatar
protectourlands
 
 
Posts: 513
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Floating Layer Height Change and Layout Grid

Post by protectourlands » Sun Nov 03, 2019 3:28 pm

Hi Pablo

Unfortunately the grid is not floating to the varying layer height. It doesn't because I believe the floating layer sets a fixed height even though it is set to "contain". Here is the html generated for the layer:

Code: Select all

<div id="topimage" style="position:relative;text-align:center;width:100%;height:441px;float:left;clear:left;display:block;">
</div>
So as the background image shrinks (contain), the layout grid below it stays positioned at the fixed height of the floating layer above it (441px). At least I think this is what is happening but I could be wrong. The other way around would work (grid on top of floating layer) because the grid has a tick to set the column height to "auto".

I've tried every setting in the layer to achieve auto height. If I use a grid instead and contain the top image and set column to "auto" everything works, but I really need a layer for more complex layering of objects I cannot do with grid.
Last edited by protectourlands on Sun Nov 03, 2019 4:04 pm, edited 1 time in total.

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

Re: Floating Layer Height Change and Layout Grid

Post by Pablo » Sun Nov 03, 2019 4:12 pm

This has nothing to do with the layout grid.
By design, layers have a fixed height.

If you need a flexible height then you can override the height with custom code.

User avatar
protectourlands
 
 
Posts: 513
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Floating Layer Height Change and Layout Grid

Post by protectourlands » Sun Nov 03, 2019 4:31 pm

This has nothing to do with the layout grid.
Exactly and this is what I have discovered. It is the fixed height of the layer that is keeping the grid from floating upward.
If you need a flexible height then you can override the height with custom code.
Can I do this in the Object HTML > Custom Style?

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

Re: Floating Layer Height Change and Layout Grid

Post by Pablo » Sun Nov 03, 2019 4:35 pm

You can add the following custom style to the layer:

Code: Select all

height: auto !important;

User avatar
protectourlands
 
 
Posts: 513
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Floating Layer Height Change and Layout Grid

Post by protectourlands » Sun Nov 03, 2019 4:50 pm

Unfortunately that didn't work. Thank you for explaining all this though. I'll try a different design.

All the best to you

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

Re: Floating Layer Height Change and Layout Grid

Post by Pablo » Sun Nov 03, 2019 5:45 pm

I think this should work.
Did you add it in the custom style section?

User avatar
protectourlands
 
 
Posts: 513
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Floating Layer Height Change and Layout Grid

Post by protectourlands » Sun Nov 03, 2019 7:14 pm

I added it to the floating layer Object HTML > Custom style

The resulting code is

Code: Select all

<div id="Layer1" style="position:relative;text-align:center;width:100%;height:442px;float:left;clear:left;height: auto !important;">
<div id="Layer1_Container" style="width:1650px;height:442px;position:relative;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;text-align:left;">
</div>
</div>

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

Re: Floating Layer Height Change and Layout Grid

Post by Pablo » Sun Nov 03, 2019 8:40 pm

The code seems ok. But depending on the browser it may ignore the inline style, even though it's set it marked as important.
You can try using a global style instead.

User avatar
protectourlands
 
 
Posts: 513
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Floating Layer Height Change and Layout Grid

Post by protectourlands » Mon Nov 04, 2019 3:10 pm

I even tried directly editing the CSS after publish and that did not work either.

Changed

Code: Select all

height:442px
to

Code: Select all

height: auto
No worries. I changed the format to "cover" so the height stays the same.

I really appreciate the time you took to look at this Pablo.

Post Reply