Opened 12 years ago

Closed 12 years ago

Last modified 12 years ago

#4444 closed defect (fixed)

Form input widgets: set outer width via style tag

Reported by: bill Owned by: bill
Priority: high Milestone: 1.0
Component: Dijit Version: 0.9
Keywords: 4alex Cc: alex
Blocked By: Blocking:

Description

It would be nice to be albe to set the size of a form widget, so that:

  <input dojoType=dijit.form.Spinner style="width: 300px">

makes an element 300px wide (20px for the buttons and 280px for the input, minus something for borders).

The problem is that we can't use javascript sizing during widget creation because it's too slow and also falls down if the widget's ancestor is hidden (although Doug has suggested watching the onLoad event to tell when a widget becomes unhidden).

But anyway, now that most/all of our widgets are using tables (without borders) it seems we can achieve both goals at once, using 100% width on the table element with the <input>. Example:

<table style="width: 300px;">
<tr>
  <td width="100%"> <input style="width: 100%;"> </td>
  <td width="0%"> x </td>
</tr>
</table>

See attached testcase.

Thanks to Alex for the suggestion.

Attachments (1)

table.html (1.3 KB) - added by bill 12 years ago.
tests for block and inline formatting

Download all attachments as: .zip

Change History (17)

comment:1 Changed 12 years ago by bill

Milestone: 1.11.0
Owner: changed from Douglas Hays to alex

Sounds like Alex is working on this. See also #4475.

comment:2 Changed 12 years ago by bill

Keywords: 4alex added

Changed 12 years ago by bill

Attachment: table.html added

tests for block and inline formatting

comment:3 Changed 12 years ago by bill

Owner: changed from alex to bill
Status: newassigned

comment:4 Changed 12 years ago by bill

Resolution: fixed
Status: assignedclosed

(In [10663]) 1. Move validation icon to appear inside the box (for TextBox?, ValidationTextBox?, ComboBox?, and Spinner template based widgets).

  1. Width setting applies to outer node: setting combobox to width=100px leaves 16px

for the arrow icon and 84px for the input node (unless the error icon is shown, in which case the input gets less space). Size property desupported.

This is still rough; it needs some more CSS cleanup and haven't even looked at soria yet... but the basics are there.

Fixes #4444, #4512, #4489 Refs #4475, #4513

comment:5 Changed 12 years ago by bill

(In [10667]) Lots of CSS related cleanup, mainly because border is now on table, not table cells. Also fixed custom styling for ComboBox? and [Validation]TextBox?. Still some work to do. Refs #4444.

comment:6 Changed 12 years ago by bill

(In [10670]) Fix hasDownArrow=false display; refs #4444.

comment:7 Changed 12 years ago by bill

(In [10696]) put id="widget_${id}" on outer table node. Refs #4444. (this was being done for ComboBox? and Spinner already but not for TextBox?)

comment:8 Changed 12 years ago by bill

(In [10697]) Base class for spinner was defaulting to dijitTextBox, thus hiding the down arrow (because there's a rule to hide the down arrow since ComboBox? with hasDownArrow=false still uses the same template but just sets class to dijitTextBox).

Refs #4444.

comment:9 Changed 12 years ago by bill

(In [10702]) Remove deprecated dijitInlineBox in favor of dijitInline. Refs #4444.

comment:10 Changed 12 years ago by bill

(In [10725]) Get rid of vertical padding around drop-down button and spinner buttons. The table already centers these buttons vertically, and don't want to make the controllers taller than the input (unless necessary to show the icon itself). Refs #4444.

comment:11 Changed 12 years ago by bill

(In [10756]) update test to check for very wide fields; unfortunately not working on FF2 or Safari (refs #4444)

comment:12 Changed 12 years ago by bill

(In [10798]) [temporary?] workaround to table sizing bugs on FF and safari, causing wide ValidationTextBox? widgets to have an <input> field that's too narrow (with blank space after it). Still need to fix plain TextBox?. Also, doesn't address the IE issue that typing too much text will cause the field to expand past specified width. Refs #4444.

comment:13 Changed 12 years ago by bill

(In [10799]) Fix sizing issues on FF and Safari by using plain <input> as template for (non-validating) TextBox?, rather than an <input> nested in a <table> I thought this would require a lot of CSS changes, since the rules for dijitTextBox assume the nested <input>, but apparently the CSS rules work as is. Refs #4444.

comment:14 Changed 12 years ago by bill

(In [10857]) background-color: transparent for an <input> doesn't work on IE6. Refs #4444.

comment:15 Changed 12 years ago by bill

(In [11063]) Tweak border style for focused nodes so top/left/right/bottom and internal borders are all same color. Refs #4444.

comment:16 Changed 12 years ago by bill

(In [12865]) Fix formatting issues for form widgets on FF; CSS in the test file was incorrect. Refs #4444.

Note: See TracTickets for help on using tickets.