Height for marginless column

[malavkarkar]

Hello! I have a set up a layout where on the left side is an image, and on the right side is scrollable text.

When the text is longer than image, I want the text column size to be same as image size, and scroll the remaining text within that area.

How to get this fixed height?

[tristup]

Hi Malav,

Thanks for reaching out.
What you are trying to do is required some custom JavaScript code to set the text element height similar to the image. I would suggest you add the following custom JavaScript code into the Theme Options > JS and check if that works for you. You may need to adjust the padding of the text element column to make the column in equal height.

jQuery(document).ready(function($){	
     jQuery(".entry-content .scrollarea").css('height', jQuery(".entry-content .x-img").height());
});

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail One, where we answer the questions beyond normal theme support.

Thanks

[malavkarkar]

Perfect, thank you! That worked.

Now if I were to add another row with different size image, will the code still work?

[tristup]

Hi Malav,

That will work too, but it may create some conflict as it is getting the size of an image, if there are multiple images you may need to add a class to the image and mention that in place of x-img in the code and your code will look like the following one.

jQuery(document).ready(function($){	
     jQuery(".entry-content .scrollarea").css('height', jQuery(".entry-content .test .x-img").height());
});

In the above code, test is a class that has been added to the image element to avoid conflict. You need to may need to add a different classes for different text element and you need to mention it in your code too.

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail One, where we answer the questions beyond normal theme support.

Thanks

[malavkarkar]

Hi!

This worked, thank you so much!

[tristup]

Hi Malav,

Glad that we are able to help you.

Thanks