Sidebar Height Auto Adjust

Support
#1

Hi

I have a sidebar that contains a fair bit of content, which means that when there isn’t much page content there is a big white space to the side of the sidebar and the user has to scroll for ages to get to the footer.

Is there any way to have a sidebar that adjusts it’s height depending upon the page content to the side of it?

Cheers

Tom

#2

Hi Tom,

Would you mind sharing us your site URL so we can check the issue? This way we can be specific on our suggestion

#3

Hi,

it’s a development site, will it be private?

Tom

#5

Hello There,

Thanks for updating in! You can insert the url of your site in a secure note (the key icon next to the reply button) to make sure that only you and our staff will see it. Meanwhile, you may try using this custom css which might solve your issue. please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

body .x-sidebar {
  min-height: 80vh;
}

Please let us know how it goes.

#6

Hi,

Hi thanks, that didn’t seem to work unfortunately. Here is a link to a page where it is particularly evident:

#7

Hi there,

Unfortunately, the customization you want is out of our support scope. The customization should have a Javascript code which calculates the height of the content on each page.

We will not do the customization ourselves, but we will help you do it yourself. Kindly add the Code below to X > Launch > Options > JS:

var theHeight = jQuery('.x-main').height();
jQuery('.x-sidebar').height(theHeight);

This calculates the content height and makes the Sidebar the same height.Also add the code below to X > Launch > Options > CSS:

and change the previously suggested code to this:

body .x-sidebar {
    overflow: auto;
}

That will force the sidebar to scroll when the height is smaller than actual content so that the viewer can scroll to see the rest of the content.

Thank you.

1 Like
#8

Awesome, love you guys.

#9

Glad that we could be of a help :slight_smile:

1 Like