Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#6936 closed bug (wontfix)

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.

Change History (7)

comment:1 Changed 9 years ago by Scott González

Resolution: wontfix
Status: newclosed

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

comment:2 Changed 9 years ago by 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.

comment:3 Changed 9 years ago by Scott González

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

comment:4 in reply to:  3 Changed 9 years ago by 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.

comment:5 Changed 9 years ago by 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.

comment:6 in reply to:  5 Changed 9 years ago by 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?

comment:7 Changed 9 years ago by 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.

Note: See TracTickets for help on using tickets.