Skip to main content

Search and Top Navigation

#6936 closed bug (wontfix)

Opened February 03, 2011 06:46PM UTC

Closed February 03, 2011 07:01PM UTC

Last modified February 08, 2011 11:54PM UTC

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

Reported by: jihohan Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.accordion Version: 1.8.9
Keywords: Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (7)

Changed February 03, 2011 07:01PM UTC by scottgonzalez comment:1

resolution: → wontfix
status: newclosed

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

Changed February 04, 2011 09:27PM UTC by jihohan comment:2

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.

Changed February 04, 2011 09:31PM UTC by scottgonzalez comment:3

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

Changed February 08, 2011 08:21PM UTC by jihohan comment:4

Replying to [comment:3 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 (#[ticket:6957]). The workaround I put in is, on change event, reset the overflow value.

Changed February 08, 2011 08:48PM UTC by scottgonzalez comment:5

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.

Changed February 08, 2011 10:49PM UTC by jihohan comment:6

Replying to [comment:5 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?

Changed February 08, 2011 11:54PM UTC by scottgonzalez comment:7

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