Tono Nam Tono Nam - 8 months ago 62
HTML Question

Change element height if it overflows

I am using jQuery and I have an accordion widget. I place content inside each container dynamically. I will like the accordion to grow (height increase) as I place new content inside a new control. My accordion control looks like:

enter image description here

I initialize my projects accordion widget as:

autoHeight: false,
navigation: true,
collapsible: true,
fillSpace: true


As I place HTML inside that accordion with Ajax dynamically you can see that the elements start overflowing. I don't want to see the scroll bars.

So I was thinking of dong something like:

somehow with JavaScript see if an element on the dom is overflowing (has the scroll bar)

if it does then increase it's height by 10 px until it does not overflow.

I know I can set a fix height but I don't know how much html content I will be placing in each accordion in advance. What do you guys suggest on how to deal with this overflowing issue?


It will be nice if I could resolve this with CSS since I construct the accordion widget dynamically.

Answer Source

I been working on it and I have:

function removeOverflow(element){
     var newHeight = $(element).height() + element.offsetHeight; 
    $(element).height(newHeight+"px")  // set the hight of the overflowing element