Norman Bentley Norman Bentley - 5 months ago 64
jQuery Question

Dynamic content (Textarea) inside a jQuery Accordion

The scenario is pretty straight-forward, I have a textarea within a jQuery accordion. When I adjust the height of the text-area on my browser, the content of the current accordion overlaps to the accordion below.

<div class="accordion">
<h3>Sec 1</h3>
<div>
<textarea></textarea>
I move with the textarea
</div>
</div>

<div>
<span>I am being overlapped :o</span>
</div>


-I encountered a similar issue with with dynamically appending content (e.g. ). I overcame this with refreshing the accordion.

$(".accordion").accordion("refresh");


How can I handle resizing of text-areas? I don't want to capture the resize event as I have many text-areas and I don't want to keep track of all their initial dimensions. Thanks!

edit

I realize now, by default accordion will create a scrollbar for 'overflowed' content. I want my content to dynamically resize the height however, so I did an over-ride on the css

.ui-accordion .ui-accordion-content {
overflow: visible !important;
}


Here is a working demo.

https://jsfiddle.net/normangr7/vebw8o0b/

Answer

Set the height : auto !important; for .ui-accordion .ui-accordion-content

.ui-accordion .ui-accordion-content {
  height :auto !important;
  padding: 0px;
  overflow: visible !important;  
}

Demo : http://jsfiddle.net/kishoresahas/vebw8o0b/1