Skip to main content

How can you adjust the height of a jquery UI accordian?

Image
By User


In my UI I have an accordian setup that so far functions 





<div id="object_list">

    <h3>Section 1</h3>

    <div>...content...</div>



    // More sections

</div>


The accordian works properly when it is first formed, and it seems to adjust itself well for the content inside each of the sections. However, if I then add more content into the accordian after the .accordian() call (via ajax), the inner for the section ends up overflowing.



Since the accordian is being formed with almost no content, all the inner divs are extremely small, and thus the content overflows and you get accordians with scrollbars inside with almost no viewing area.



I have attempted to add min-height styles to the object_list div, and the content divs to no avail. Adding the min-height to the inner divs kind of worked, but it messed up the accordian's animations, and adding it to the object_list div did absolutely nothing.



How can I get a reasonable size out of the content sections even when there is not enough content to fill those sections?


Source: Tips4all, CCNA FINAL EXAM
Labels:

Comments

  1. UserMay 13, 2012 at 8:31 AM

    When you declare the accordion control div, you can put a height in the style tag for the div. Then you can set the fillSpace: true property to force the accordion control to fill that div space no matter what. This means you can set the height to whatever works best for you page. You could then change the height of the div when you add your code

    If you want the accordion to dynamically resize to the content it contains as needed you can do the following trick posted on the jQuery UI website.

    //getter
    var autoHeight = $( ".selector" ).accordion( "option", "autoHeight" );
    //setter
    $( ".selector" ).accordion( "option", "autoHeight", false );


    This means when you select an area with a lot of text, the accordion will recalculate it.

    ReplyDelete
  2. UserMay 13, 2012 at 8:31 AM

    From the docs it sounds like you'll need to set

    clearStyle: true


    ...and also

    autoHeight: false


    I believe that using clearStyle allows you to dynamically add content without Accordion getting in the way.

    So try this...

    $( ".selector" ).accordion({ clearStyle: true, autoHeight: false });

    ReplyDelete
  3. UserMay 13, 2012 at 8:31 AM

    Just call the accordions .resize() method, this will recalculate its size.
    http://docs.jquery.com/UI/Accordion#method-resize

    ReplyDelete

Post a Comment

Popular posts from this blog

Why is this Javascript much *slower* than its jQuery equivalent?

By User
I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...
3 comments
Read more

Is it possible to have IF statement in an Echo statement in PHP

By User
Thanks in advance. I did look at the other questions/answers that were similar and didn't find exactly what I was looking for. I'm trying to do this, am I on the right path? echo " <div id='tabs-".$match."'> <textarea id='".$match."' name='".$match."'>". if ($COLUMN_NAME === $match) { echo $FIELD_WITH_COLUMN_NAME; } else { } ."</textarea> <script type='text/javascript'> CKEDITOR.replace( '".$match."' ); </script> </div>"; I am getting the following error message in the browser: Parse error: syntax error, unexpected T_IF Please let me know if this is the right way to go about nesting an IF statement inside an echo. Thank you.
5 comments
Read more