How can you adjust the height of a jQuery UI accor

2019-03-09 07:37发布

In my UI I have an accordion setup like this:

<div id="object_list">
    <h3>Section 1</h3>
    <div>...content...</div>

    // More sections
</div>

The accordion 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 accordion after the .accordion() call (via ajax), the inner for the section ends up overflowing.

Since the accordion is being formed with almost no content, all the inner divs are extremely small, and thus the content overflows and you get accordions 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 accordion'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?

10条回答
2楼-- · 2019-03-09 07:41

In your jquery-ui.js search for the following section and change heightstyle: "auto" to heightstyle: "content" so the updated file will look like this.

var accordion = $.widget( "ui.accordion", {
  version: "1.11.4",
  options: {
    active: 0,
    animate: {},
    collapsible: false,
    event: "click",
    header: "> li > :first-child,> :not(li):even",
    heightStyle: "content",
    icons: {
        activeHeader: "ui-icon-triangle-1-s",
        header: "ui-icon-triangle-1-e"
    },

    // callbacks
    activate: null,
    beforeActivate: null
},
查看更多
【Aperson】
3楼-- · 2019-03-09 07:43

Setting the DIV's height will do the trick.

$(document).ready(function() {

    $("#accordion").show().accordion({
        autoHeight: false
    });

    $("#accordion div").css({ 'height': 'auto' });
});      
查看更多
戒情不戒烟
4楼-- · 2019-03-09 07:43

Turning off auto will work... (with any string besides auto or fill) such as the solution telling to use "panel". But...

That is the same as putting in any garbage string for "heightStyle". The "heightStyle" you are looking for is "content".

(values for option "heightStyle" in jQuery UI 1.12)

  • "auto": All panels will be set to the height of the tallest panel.
  • "fill": Expand to the available height based on the accordion's parent height.
  • "content": Each panel will be only as tall as its content.

Example: https://jsfiddle.net/qkxyodpq/5/

Hope that helps.

查看更多
走好不送
5楼-- · 2019-03-09 07:54

for me doing following worked accurately.

$( "#accordion" ).accordion({
    autoHeight: false,

});

查看更多
▲ chillily
6楼-- · 2019-03-09 07:55

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.

查看更多
不美不萌又怎样
7楼-- · 2019-03-09 07:56

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 });
查看更多
登录 后发表回答