Skip to main content

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 rolinek comment:1

Link to jfFiddle example: http://jsfiddle.net/UVsKp/

Changed February 17, 2012 02:44PM UTC by rdworth 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 February 17, 2012 02:58PM UTC by rdworth comment:3

Similar to (but different than) #5017

Changed October 11, 2012 02:52PM UTC by scottgonzalez comment:4

milestone: 1.9.02.0.0

Changed October 24, 2012 02:16PM UTC by tj.vantoll comment:5

_comment0: Verified this is still an issue in jQuery 1.9 and Firefox 16 - http://jsfiddle.net/AEqAE/.1352906802491436
status: newopen

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 aboyd 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.