Summary and Reporter fields should span width of Description text area

[Ryan J Ollos]

There is unused space to the right of the Summary and Reporter fields in the Properties fieldset. The additional space would be useful for the Summary and improve the visual layout. See also #11106.

[Ryan J Ollos]

As usual this expanded into a series of changes.

1. Here is the before and after with the Summary and Reporter expanded to fit the width of the properties box.

2. Other inputs can also use more of the available width.

3. The textareas could span the width of the the enclosing td as well. This overrides the cols parameter. We could keep the cols parameter functional, but I wonder what value it has since the textarea is always a fullrow.

The changes described in (3) are more suitable for the trunk. I feel good about change (1), but I'm less certain about (2) and (3).

Proposed changes can be found in log:rjollos.git:t11471.

[Jun Omae]

I think that

#properties table td input,

should be

#properties table td input[type=text],

e.g. radio button and checkbox.

[Ryan J Ollos]

Thanks, I forgot to test those two cases. Changes have been added to log:rjollos.git:t11471.

[Jun Omae]

1. Here is the before and after with the Summary and Reporter expanded to fit the width of the properties box.

+1, agreed. I've applied the same to custom Trac instances which our company serves.

2. Other inputs can also use more of the available width.

If a milestone has very long name, the text field would be too wide.

In the Trac instances, I've applied like this.

#properties table { table-layout: fixed }
#properties table td select { max-width: 100% }

See [f0df2bed/jomae.git].

3. The textareas could span the width of the the enclosing td as well. This overrides the cols parameter. We could keep the cols parameter functional, but I wonder what value it has since the textarea is always a fullrow.

+1 for trunk.

[Ryan J Ollos]

I like the changes that limit the width of the selects, but the second header column doesn't seem to be the right width after applying those changes (it should be 20%, but it's much wider even if the custom field with the long label is removed).

Other changes for consideration:

• Wrap the label's content if they become too wide.
• Wrap the radio buttons if there are too many entries for the width.

Revised changes in log:rjollos.git:t11471.2.

[Jun Omae]

• Wrap the radio buttons if there are too many entries for the width.

It would be good to add margin between labels.

 #properties table td.col1 label,
-#properties table td.col2 label { float: left; }
+#properties table td.col2 label { float: left; margin-right: 0.5em }
 #properties table td select { max-width: 100% }

[Ryan J Ollos]

The right-margin on the labels is a good addition. I'm still not sure what to do about the widths of the ths and tds. The image in comment:6 shows that the widths are 146px | 194px | 194px | 193px, but should be 20% | 30% | 20% | 30% = 145px | 218px | 145px | 218px.

[Ryan J Ollos]

The issue seems to be that with table-layout: fixed the width of the cells in the first row are applied to all of the rows, and the colspan forces columns 2, 3 and 4 to the same width (​SO:8848758).

At first I tried adding the following as the first row,

<tr>
  <th class="col1"></th><td class="col1"></td>
  <th class="col2"></th><td class="col2"></td>
</tr>

which works except that the empty row takes up a small bit of vertical space. ​SO:10712993 seems to have a better suggestion of using col elements. The result looks nice as far as I can see,

Here if the before, for comparison:

Latest changes can be found in log:rjollos.git:t11471.2. I've tested with Chrome 31 / Firefox 26 / Opera 12.16 on Ubuntu 13.04; IE 11 / Chrome 32 / Firefox 24 (Waterfox) on Win 7.

[Ryan J Ollos]

In [12512] on trunk: textarea custom fields now span the width of the properties box and cols field is removed. Documentation updated.