Dynamic Section Height

So I’ve a section that I want it to have a dynamic height so that it’s contents be aligned at the bottom. Think a footer to for a landing page. Or, have a fixed header height and a fixed footer height and have a middle area extend to fill the rest of the height of the window.

Hey Amr - Checkout the post below. Sam, one of our awesome customers came up with a great dynamic height solution. I can’t say it will fit your use case exactly, but it would be a great starting point:

While adding own styles to the page developers often face difficulties with the dynamic
changing DOM.
General page markup ( typical Unbounce Layout):

<div id="lp-pom-root">
    <div class="lp-positioned-content"> /* MAIN CONTAINER FOR ELEMENTS WITH POSITION=ABSOLUTE */ </div>
    <div id="lp-pom-block-XXX"> /* SECTION WITH POSITION=RELATIVE */
        <div id="lp-pom-block-XXX-color-overlay"></div>
        <div class="lp-pom-block-content"></div>
    </div> 
    <div id="lp-pom-block-YYY"> /* SECTION WITH POSITION=RELATIVE */
        <div id="lp-pom-block-YYY-color-overlay"></div> /* SECTION WITH POSITION=ABSOLUTE */
        <div class="lp-pom-block-content"></div> /* SECTION WITH POSITION=ABSOLUTE */
    </div> 
</div>

If we need to change a custom-element in a dynamic way, for instance *jquery*
accordion (#accordion)
, we need to deal with synchronous change:

  • height of parental block
  • positions of all the elements which are situated down the content
  • height of the element itself

Otherwise, the element will be depicted incorrectly (overlapping).

Below you can see the fulfillment of this task using the example of the block FAQ which
consists of two accordion (#accordion_1, #accordion_2).

Example of implementation you can find by the link.

If you need to add animation or customize in some way the code please don’t hesitate to contact with me: https://www.upwork.com/fl/webim

<script>
			$(document).ready(function () {
				var accordionHeight = Math.max($('#accordion_1').height(), $('#accordion_2').height());
				var animate_acc1 = $('#accordion_1').accordion( "option", "animate" );
				var animate_acc2 = $('#accordion_2').accordion( "option", "animate" );
				var acc_wrapper = $('#accordion_1').closest('.lp-element');
				var acc_wrap_height = acc_wrapper.height();
				var acc_top = acc_wrapper.position().top;
				// Search blocks with top > acc_top;
				var blocks1 = [], acc_block;
				$('.lp-positioned-content>.lp-element').each(function(index, element) {
					if (!$(element).is(acc_wrapper) && ($(element).position().top > acc_top)){
						blocks1.push(element);
					}
				});
				$('#lp-pom-root>.lp-element').each(function(index, element) {
					var el_top = $(element).position().top;
					if ((el_top < acc_top) && (el_top + $(element).height() > acc_top)) {
						acc_block = $(element);
						return false;
					}
				});
				var collapse_page = function(event, ui) {
        			var currAccHeight = Math.max($('#accordion_1').height(), $('#accordion_2').height());
        			var diff = currAccHeight - accordionHeight;
        			accordionHeight = currAccHeight;
        			if (acc_wrap_height < currAccHeight) {
            			acc_wrapper.height(currAccHeight);
        			} else {
            			acc_wrapper.height(acc_wrap_height);
        			}
        			// Change height
					acc_block.height(acc_block.height()+diff);
					acc_block.find('div').each(function(index, el_div) {
						$(el_div).height($(el_div).height()+diff);
					});
        
        			$.each(blocks1, function(index, element) {
            			var el_top = $(element).position().top;
            			var new_top = el_top + diff;
            			$(element).css('top', new_top+"px");
        			});
    			}
    			$( "#accordion_1" ).on( "accordionactivate", collapse_page );
    			$( "#accordion_2" ).on( "accordionactivate", collapse_page );
			});
		</script>
2 Likes

@webim - the link you provided to https://test.webim.pro/unbounce/ is a blank page. Can you provide a corrected link, please?

1 Like

Hi Sidney. Scroll down and check please the source code. On this page you can grab the script and check how it works by clicking on the accordion

1 Like

I see it now, thanks.

Can anyone help me on my page? Having a hard time on editing the code
Link

Hello,
How can I help you?

p/s: if you need any program support you can create the Project on Upwork: https://www.upwork.com/fl/widev

can you help me on fixing the dropdown on my page? Page here

I used your code on my Unbounce landing page.
This is site url

I got this error
jquery-3.4.1.min.js:2 Uncaught Error: cannot call methods on accordion prior to initialization; attempted to call method ‘option’.

When I click the “Make your gift” button, if there is error for the missing field, due to the error section, this button will be hidden. So, I think your post is the best option.
Thanks in advanced

Hi everyone,
I’ve been trying to make a section which includes a HTML element (a widget) dynamic but without success. What I need is that the section with the widget increses or decreases his height depending on the content to show and so should do all the sections below (I need it to adapt).
Here is the page: https://meglioquesto.it/lp-verifica-copertura-eolo/
Is there a quite simple way to make it work?
Thanks!
Silvia

do you have the HTML markup for your accordion?