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

Floating Layer Height Change and Layout Grid

Post by protectourlands »

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: 21580
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Floating Layer Height Change and Layout Grid

Post by Pablo »

The layout grid should automatically float. This is default behavior.
User avatar
protectourlands
 
 
Posts: 443
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Floating Layer Height Change and Layout Grid

Post by protectourlands »

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: 21580
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Floating Layer Height Change and Layout Grid

Post by Pablo »

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

Re: Floating Layer Height Change and Layout Grid

Post by protectourlands »

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: 21580
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Floating Layer Height Change and Layout Grid

Post by Pablo »

You can add the following custom style to the layer:

Code: Select all

height: auto !important;
User avatar
protectourlands
 
 
Posts: 443
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Floating Layer Height Change and Layout Grid

Post by protectourlands »

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: 21580
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Floating Layer Height Change and Layout Grid

Post by Pablo »

I think this should work.
Did you add it in the custom style section?
User avatar
protectourlands
 
 
Posts: 443
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Floating Layer Height Change and Layout Grid

Post by protectourlands »

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: 21580
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Floating Layer Height Change and Layout Grid

Post by Pablo »

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

Re: Floating Layer Height Change and Layout Grid

Post by protectourlands »

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