#4440 open bug ()

Opened April 07, 2009 06:58AM UTC

Last modified April 24, 2014 05:58PM UTC

Resizable: Doesn't render nicely for textarea fields

Reported by: lawrencepit Owned by:
Priority: minor Milestone: 2.0.0
Component: ui.resizable Version: 1.7.1
Keywords: Cc:
Blocked by: Blocking:
Description

On the demo pages it would be good to show an example of a resizable textarea field. I tested this in ff3 and safari and it doesn't render nicely at all. The resize handle is drawn way outside the textarea field. Also, when the textarea field gets focus in safari the left and top edges have a 1px thin outline (default is has a 4px blue outline).

If I wrap the textarea myself (in a simple <div></div>) and then use alsoResize I can get it working as it should.

Attachments (0)
Change History (7)

Changed April 08, 2009 01:31AM UTC by scottgonzalez comment:1

component: ui.core → ui.resizable
milestone: TBD → 1.8

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

milestone: 1.9.0 → 2.0.0

Changed October 24, 2012 04:27PM UTC by tj.vantoll comment:3

_comment0: Confirmed that textarea still look a little off when made resizable by default - http://jsfiddle.net/tj_vantoll/uCqGH/. \ \ The demo page (http://jqueryui.com/resizable/#textarea) looks fine but it gets around this issue by applying .ui-resizable-se { bottom: 17px; } to fix the positioning. \ \ I can also still see the strange display of the outline when resizable is applied to a textarea in Safari 6. → 1351096083529393
_comment1: Confirmed that textarea still looks a little off when made resizable by default - http://jsfiddle.net/tj_vantoll/uCqGH/. \ \ The demo page (http://jqueryui.com/resizable/#textarea) looks fine but it gets around this issue by applying .ui-resizable-se { bottom: 17px; } to fix the positioning. \ \ I can also still see the strange display of the outline when resizable is applied to a textarea in Safari 6. → 1351178514209191
status: new → open

Confirmed that textarea still looks a little off when made resizable by default - http://jsfiddle.net/tj_vantoll/uCqGH/. We discussed this and our thought is that our resizable textareas should work like native resizable textareas - the controls should be on top of the textarea by default.

The demo page (http://jqueryui.com/resizable/#textarea) looks fine but it gets around this issue by applying .ui-resizable-se { bottom: 17px; } to account for the added padding.

I can also still see the strange display of the outline when resizable is applied to a textarea in Safari 6.

Changed October 25, 2012 03:22PM UTC by tj.vantoll comment:4

summary: Resizable doesn't render nicely for textarea fields → Resizable: Doesn't render nicely for textarea fields

Changed October 25, 2012 03:22PM UTC by tj.vantoll comment:5

#4596 is a duplicate of this ticket.

Changed October 27, 2012 12:41AM UTC by tj.vantoll comment:6

#4373 is a duplicate of this ticket.

Changed April 24, 2014 05:58PM UTC by jzaefferer comment:7

The textarea in our demo looks and behave awful in IE8. Its gets centered on the page and the resize handle is on top of a (disabled) scrollbar.