Results 1 to 5 of 5

Thread: Accordion list expands outside container div

  1. #1
    Join Date
    Oct 2009
    Location
    La Selva Beach, CA
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Accordion list expands outside container div

    1) Script Title: Bullet List Accordion Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...enu-bullet.htm

    3) Describe problem: When the list is expanded, it can push content below the container div's bottom. The container div should expand with the list. You can view it at http://dev.inkari.com/experience.php. When you expand the first list you should see the red type pushed below the containing div (a light gray boxed area).

    As an aside, the expand/close buttons are list-style-images. I noticed that in Firefox, the entire list gets highlighted when these buttons are clicked. Doesn't happen in Safari or Chrome.

    Bill
    Last edited by parboy; 12-19-2012 at 02:02 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    That text:

    This text gets pushed below the containing div's bottom edge.
    The containing div should expand with the list.
    is actually inside the container (div class="arrowlistmenu") for the accordion. So of course it will get pushed around.

    What you need to do is to set an explicit height for the arrowlistmenu div and set its overflow to hidden. Make sure that the height is able to accommodate the tallest content that there will be in there, but no higher. About 250 to 300 px should be enough. Use as short as is possible, to allow room for other stuff if you want it. If it's OK with you that that other stuff get covered that might not matter. Then simply put anything else you want around there outside of the arrowlistmenu div.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2009
    Location
    La Selva Beach, CA
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hi John, thanks for the idea. That works, but it forces the containing div to be excessively long when the list is closed. The challenge is to get the containing div to expand when the list expands and retract when the list is closed.

    Bill

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Instead of an explicit height, then set an explicit max-height.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Oct 2009
    Location
    La Selva Beach, CA
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    That didn't work. I noticed that the containing div expands on refresh and wondered if there is a way to refresh the browser when a list is expanded. This idea feels like a work-around but could work.

    Bill

Similar Threads

  1. Bullet List Accordion Menu
    By ilemon in forum Dynamic Drive scripts help
    Replies: 10
    Last Post: 07-06-2012, 04:47 PM
  2. Bullet List Accordion Menu-Non Expandable items in list
    By taziq in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-14-2010, 09:04 PM
  3. Accordion Menu-nested list
    By blackberg in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 09-28-2009, 06:55 PM
  4. Bullet List Accordion Menu
    By johnp392002 in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 01-08-2009, 05:56 PM
  5. Need Help On Bullet List Accordion Menu
    By tsidell in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-28-2008, 01:06 AM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •