Page 1 of 1
Floating Layer Height Change and Layout Grid
Posted: Sun Nov 03, 2019 3:55 am
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?
Re: Floating Layer Height Change and Layout Grid
Posted: Sun Nov 03, 2019 7:54 am
by Pablo
The layout grid should automatically float. This is default behavior.
Re: Floating Layer Height Change and Layout Grid
Posted: Sun Nov 03, 2019 3:28 pm
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.
Re: Floating Layer Height Change and Layout Grid
Posted: Sun Nov 03, 2019 4:12 pm
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.
Re: Floating Layer Height Change and Layout Grid
Posted: Sun Nov 03, 2019 4:31 pm
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?
Re: Floating Layer Height Change and Layout Grid
Posted: Sun Nov 03, 2019 4:35 pm
by Pablo
You can add the following custom style to the layer:
Re: Floating Layer Height Change and Layout Grid
Posted: Sun Nov 03, 2019 4:50 pm
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
Re: Floating Layer Height Change and Layout Grid
Posted: Sun Nov 03, 2019 5:45 pm
by Pablo
I think this should work.
Did you add it in the custom style section?
Re: Floating Layer Height Change and Layout Grid
Posted: Sun Nov 03, 2019 7:14 pm
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>
Re: Floating Layer Height Change and Layout Grid
Posted: Sun Nov 03, 2019 8:40 pm
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.
Re: Floating Layer Height Change and Layout Grid
Posted: Mon Nov 04, 2019 3:10 pm
by protectourlands
I even tried directly editing the CSS after publish and that did not work either.
Changed
to
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.