Please refer to the following jsfiddle:  resizable limitation

My intention is to have textareas that have widths that scale with the resizable dialog containing them.  However, I also want the textareas to be able to be resized vertically with resizable.

I figured out that because resizable depends on $().outerWidth() for setting its initial pixel widths, the element that resizable is applied to must be displayed when resizable is initialized if the element has a % based relative width .  (Otherwise the returned width is bogus.)  This is a limitation of $().outerWidth() used by resizable.  From my research, it looks like the whole issue of figuring out a decent pixel width for a hidden element that has a relative % width was basically put off for another day by the jQuery developers.

Because my text areas are in tabs in the dialog, it complicates things further.  While I can get the initial width of text area 1 to be correct by calling resizable in the dialog open event, the initial width of text area 2 will still not be correct since it is still hidden in the dialog open event.

I have come up with a work around that uses the inner width of the active tab to convert % widths for all of the elements with the resizable class to a pixel width before calling resizable.  (Since the inner width of the tabs should be the same for all tabs in the same set regardless of whether they are displayed or hidden.)...

1. var panelWidth = $("#dialogdiv").find(".ui-tabs-panel[aria-hidden='false']").width();
2. $("#dialogdiv").find(".resizable").css('width',function(index,value){ return value.indexOf('%')<0 ? value : (parseInt(value,10) * panelWidth /100) + 'px';}) 
   

However, the downside of my workaround is that the text areas widths no longer scale with the dialog width resizing.

Any ideas how I can make this work as intended?  It looks like I need to do something in the dialog resize event, but I am not sure what I need to do there.