Opened 12 years ago

Closed 12 years ago

Last modified 8 years ago

#3853 closed defect (fixed)

TextArea: width not resizing in FF

Reported by: haysmark Owned by: haysmark
Priority: high Milestone: 0.9
Component: Dijit - Form Version: 0.9
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by haysmark)

In test_TextArea, the width of the red bordered TextArea? is set to 33% so it should resize with the screen. It is instead fixed at a certain width. This only affects the Firefox implementation.

Attachments (2)

iframebug.html​ (630 bytes) - added by haysmark 12 years ago.
Test case demonstrating -moz-inline-stack width bug
3853.patch​ (7.7 KB) - added by bill 12 years ago.
prototype patch showing sizing on <iframe> node

Download all attachments as: .zip

Change History (11)

comment:1 Changed 12 years ago by haysmark

Status: new → assigned

Seems to be a conflict with one of the CSS classes.

Changed 12 years ago by haysmark

Attachment: iframebug.html​ added

Test case demonstrating -moz-inline-stack width bug

comment:2 Changed 12 years ago by haysmark

Description: modified (diff)

comment:4 Changed 12 years ago by haysmark

Resolution: → duplicate
Status: assigned → closed

I've tried some of the other inline display settings without success. Clearly this problem is a much larger Mozilla bug than I thought.

comment:5 Changed 12 years ago by bill

Resolution: duplicate
Status: closed → reopened

Duplicate is not the same thing as "browser bug". I'll take a look at this.

comment:6 Changed 12 years ago by bill

The problem deals with trying to set width:33% on the parent inline-block element (btw it doesn't matter if it's <fieldset> or <div> or <span>), and then expecting the child <iframe> width:100% to work. That's just too much for Mozilla to handle.

You can avoid all this by putting the width:33% on the child <iframe>, and make the parent a simple <span> (of type display:inline) with no border or sizing. Note that the parent is just there to bundle the <iframe> with the hidden <textarea>. 

<span class="dijitReset">
  <iframe class="dijitReset" style="width: 33%;">...</iframe>
  <textarea style="display:none"></textarea>
</span>

There are some tricky details though. Style classes like dijitInputField and dijitInputFieldFocused can't be applied to the <span>. I think they need to go on the <body> inside the <iframe>.

I'll attach a patch that gets halfway there so you can see the technique. (There's something wrong in the patch because scrollbars keep showing up intermittently. Looks like we need an overflow: hidden somewhere.)

Changed 12 years ago by bill

Attachment: 3853.patch​ added

prototype patch showing sizing on <iframe> node

comment:7 Changed 12 years ago by bill

Summary: TextArea: not resizing in FF → TextArea: width not resizing in FF

comment:8 Changed 12 years ago by Douglas Hays

Resolution: → fixed
Status: reopened → closed

(In [10080]) Fixes #3853. Proxy commit for haysmark. Added styleNode to list of special dojoAtachPoints. Changed TextArea? template to allow FF to resize.

comment:9 Changed 8 years ago by bill

Component: Dijit → Dijit - Form
Note: See TracTickets for help on using tickets.