Loading...

Search jQuery

Search

jQuery Forum

Using jQuery UI

Accordion heightStyle: "content" not working

in Using jQuery UI • 6 years ago

Following the API documentation here:

http://api.jqueryui.com/accordion/#option-heightStyle

I set "heightStyle" to "content" in an attempt to get all panels to re-size to their content. However, it's not working as you can see here:

http://thehighpriestess.github.io/staxteas/stixoi.html

...the first panel is taller than the content. It's the size of the taller second panel.

https://github.com/TheHighPriestess/staxteas/blob/master/stixoi.html

Does anyone have an idea what's going on here?

Thank you.

1

Replies(16)

jakecigar

Re: Accordion heightStyle: "content" not working

6 years ago

You can tell http://thehighpriestess.github.io/staxteas/stixoi.html is working properly because the copyright does not move.

JΛ̊KE

Re: Accordion heightStyle: "content" not working

6 years ago

If I delete some of the text from the panel beneath it...that white space disappears. Therefore, it can't be working properly.

Re: Accordion heightStyle: "content" not working

6 years ago

If I delete text from the panel beneath it...the white space shrinks. Therefore, it must be taking on the size of the largest panel.

jakecigar

Re: Accordion heightStyle: "content" not working

6 years ago

Make a demo that shows it not working.

JΛ̊KE

Re: Accordion heightStyle: "content" not working

6 years ago

haha

Thanks for your "help".

Re: Accordion heightStyle: "content" not working

6 years ago

It doesn't work and I have explained what's happening.

It is taking on the height of the tallest panel. If I remove text from the second panel the white space in the first panel SHRINKS. If I add text that white space GROWS.

jakecigar

Re: Accordion heightStyle: "content" not working

6 years ago

You would have to destroy the accordion and remake it. Or possibly remove heightStyle and re-add it.

JΛ̊KE

Re: Accordion heightStyle: "content" not working

6 years ago

I have already tried that.

The docs clearly state that with

heightStyle : "content"

"each panel will be only as tall as its content."

That's not what's happening. The first panel is TALLER than it's content. It is as tall as the content in the second panel. I verified that this is what's going on when I removed text from the second panel and saw the first panel shrink accordingly.

Therefore,

heightStyle: "content"

isn't doing what the docs say that it should be doing.

jakecigar

Re: Accordion heightStyle: "content" not working

6 years ago

$( ".selector" ).accordion( "option", "heightStyle", "fill" );

The dynamic one is used when you need to change something in mid stream, like after you delete or add text…

$( … ).accordion( "option", "heightStyle", "auto" ).accordion( "option", "heightStyle", "content" )

Or if that doesn't work…

$( … ).accordion("destroy").accordion( your original options )

JΛ̊KE

Re: Accordion heightStyle: "content" not working

6 years ago

According the docs...what I have should work. I am not changing the text after the page has been loaded.

Re: Accordion heightStyle: "content" not working

6 years ago

Btw, I Googled for this problem and saw that others were having the same trouble with the accordion. However, the solutions there don't apply to me. That's why I am asking here.

According to everything I've read...it should work as far as I can tell.

jakecigar

Re: Accordion heightStyle: "content" not working

6 years ago

Your demo worked for me. You haven't shown anything that doesn't work.

You can try explaining again. But making a demo that shows the problem is best.

JΛ̊KE

Re: Accordion heightStyle: "content" not working

6 years ago

How exactly did it work for you? What do you mean when you say that it "worked"?

Re: Accordion heightStyle: "content" not working

6 years ago

Do you consider it "working" to have a heightStyle of "auto" even though "content" is specified?

jakecigar

Re: Accordion heightStyle: "content" not working

6 years ago

Each div had the same height. Is it possible you are running an older version in your browser?

JΛ̊KE

Re: Accordion heightStyle: "content" not working

6 years ago

Each div had the same height.

They are exhibiting default behavior and taking on the size of the largest panel.

Everything is up to date.