Accordion's content panel spills out to the side in IE 6

[jihohan]

You can easily see this in the demo page as well:

​http://jqueryui.com/demos/accordion/fillspace.html

if you decrease the width, eventually the content panel will spill out rather than the panel gaining a horizontal scrollbar. You can probably see this easier if you had a long text with no breaks something like in a PRE tag.

Firefox does not have this problem. It correctly gains a horizontal scrollbar.

[Scott González]

There's not really anything we can do about IE 6's support for overflow.

[jihohan]

I've fixed this by adding the following style:

.ui-accordion { overflow: hidden; }

that fixes the accordion's width. Then, in javascript, whenever the accordion's width changes, fix the .ui-accordion-content's width:

// where 'this' is .ui-accordion
$(this).find(".ui-accordion-content").each(function() {
    var $this = $(this);
    $this.width($this.parent().width() - ($this.outerWidth() - $this.width()));
});

Since you won't fix it, someone else might find this useful.

[Scott González]

The reason we can't do that inside the widget is because this would break the fluid nature of the accordion.

[jihohan]

Replying to scott.gonzalez:

The reason we can't do that inside the widget is because this would break the fluid nature of the accordion.

I'm not certain what you mean by "fluid nature", but perhaps the following is more "fluid". In IE 6 specific css (w/ conditional comment):

.ui-accordion
{
	overflow: hidden;
}
.ui-accordion-content
{
	width: expression($(this).parent().width() - $(this).data("trim"));
}

Then when you initialize accordion:

$("#sidenav").accordion({
	fillSpace: true,
	change: function(event, ui) {
		if ($.browser.msie && parseFloat($.browser.version) < 7.0) {
			ui.oldContent.css("overflow", "auto"); // fix for IE 6
		}
	},
	create: function() {
		if ($.browser.msie && parseFloat($.browser.version) < 7.0) {
			$(this).children(".ui-accordion-content").each(function() {
				var $this = $(this);
				$this.data("trim", $this.outerWidth() - $this.width());
			});
		}
	}
});

It uses IE specific expression and I know of its shortcomings but it seems to work fine in this case and I think it works out better than the alternative. I was surprised to see that jquery call works in css expressions but it does. I tried putting in the calculation itself - which would have eliminated the create handler - in the expression but when I do, IE hangs. I am guessing that something inside outerWidth() or width() puts IE in a loop.

Also, there seems to be a bug with the accordion control where in IE 6, the overflow value doesn't get reset to auto when switching tabs (#6957). The workaround I put in is, on change event, reset the overflow value.

[Scott González]

By fluid I mean that the accordion always adjusts to the width of its container. Also, we can't use expressions as they rely on global variables.

[jihohan]

Replying to scott.gonzalez:

By fluid I mean that the accordion always adjusts to the width of its container. Also, we can't use expressions as they rely on global variables.

By global variables, do you mean the use of $.browser?

[Scott González]

Expressions run in the global scope. Your expression references the global $ variable, which goes against our coding standards and breaks noConflict support.