#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 12 years ago by
Resolution: | → wontfix |
---|---|
Status: | new → closed |
comment:2 Changed 12 years ago by
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 follow-up: 4 Changed 12 years ago by
The reason we can't do that inside the widget is because this would break the fluid nature of the accordion.
comment:4 Changed 12 years ago by
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 follow-up: 6 Changed 12 years ago by
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 Changed 12 years ago by
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 12 years ago by
Expressions run in the global scope. Your expression references the global $ variable, which goes against our coding standards and breaks noConflict support.
There's not really anything we can do about IE 6's support for overflow.