Search and Top Navigation
#8120 open bug ()
Opened February 17, 2012 04:25AM UTC
Last modified November 14, 2012 03:17PM UTC
resizable does not work for table headers in Firefox
| Reported by: | rolinek | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 2.0.0 |
| Component: | ui.resizable | Version: | 1.8.11 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
We are using ui.resizable to resize table columns.
We can't get ui.resizable to work for table header on Firefox (it works on Chrome, IE9, Safari), it seems to crash inside Firefox.
We can resize div element using ui.resizable without any problems in Firefox.
We tried different combinations of jquery, jquery ui (1.8.11 distributed with MS Studio 2010, 1.8.17) and Firefox (9 & 10).
Is this a known issue? Is there a work around?
Attachments (0)
Change History (6)
Changed February 17, 2012 06:36AM UTC by comment:1
Changed February 17, 2012 02:44PM UTC by comment:2
This is a known issue (and quite an old one) in Firefox. See https://bugzilla.mozilla.org/show_bug.cgi?id=63895
A work-around (not without consequences) may be
td, th { display:inline-block; }
or you could have a div fill the cell and make the div resizable.
Changed October 11, 2012 02:52PM UTC by comment:4
| milestone: | 1.9.0 → 2.0.0 |
|---|
Changed October 24, 2012 02:16PM UTC by comment:5
| _comment0: | Verified this is still an issue in jQuery 1.9 and Firefox 16 - http://jsfiddle.net/AEqAE/. → 1352906802491436 |
|---|---|
| status: | new → open |
Verified this is still an issue in jQuery UI 1.9 and Firefox 16 - http://jsfiddle.net/AEqAE/.
Changed November 14, 2012 03:17PM UTC by comment:6
| _comment0: | float: right; \ height: 29px; \ margin: -6px -14px -6px 0; \ position: static; \ width: 7px; \ \ Here is some css that I used as a workaround. Obviously you would have to change the "height" as per your specifications. But it works in firefox and other browsers too. → 1352906293124910 |
|---|
float: right;
height: 29px;
margin: -6px -14px -6px 0;
position: static;
width: 7px;
I put this css on the ui-resizable-handle div that gets put inside the th.
Here is some css that I used as a workaround. Obviously you would have to change the "height" as per your specifications. But it works in firefox and other browsers too.
Link to jfFiddle example: http://jsfiddle.net/UVsKp/