Edgewall Software

Opened 6 years ago

Closed 6 years ago

#11678 closed enhancement (fixed)

Add a small amount of padding to textareas

Reported by: Ryan J Ollos Owned by: Ryan J Ollos
Priority: normal Milestone: 1.0.2
Component: general Version:
Severity: normal Keywords:
Cc: Branch:
Release Notes:

Added padding and improved positioning of textareas.

API Changes:

The trac-fullwidth class can be used on textareas and inputs that span the width of the enclosing fieldset.

Internal Changes:


Many of the textareas, including the ticket comment textarea, have padding: 0. One consequence is that underscores can be hidden when typing on the last line in the textarea. It would also be more visually appealing to have a small amount of padding, say 2px.

Attachments (0)

Change History (7)

comment:1 by Jun Omae, 6 years ago

Adding non-zero padding would lead textarea to overflow container when width: 100% for the textarea. However, if box-sizing: border-box is also added, good to me.

Also, we could remove negative margins from css/ticket.css by box-sizing: border-box.

-#comment { margin-left: -1px; margin-right: -1px; padding: 0; width: 100% }
+#comment { width: 100% }
Last edited 6 years ago by Jun Omae (previous) (diff)

comment:2 by Ryan J Ollos, 6 years ago

Another issue to fix is that this rule doesn't work well with box-sizing: border-box. For example, on the report edit page after #11106, the input and textarea are shifted slightly to the right. I think we can add a trac-fullwidth class for textareas and inputs that has width: 100%, box-sizing: border-box, margin-left: 0 (and possibly other rules). Also, I think comment:20:ticket:11106 will be made irrelevant by these changes.

I will push the changes in #11499 before proposing these additional changes though.

Last edited 6 years ago by Ryan J Ollos (previous) (diff)

comment:3 by Ryan J Ollos, 6 years ago

Owner: set to Ryan J Ollos
Status: newassigned

comment:4 by Ryan J Ollos, 6 years ago

Quick implementation in log:rjollos.git:t11678.1. I'll spend more time testing the changes tomorrow.

comment:5 by Jun Omae, 6 years ago

Looks good to me. However, in [5e1db271/rjollos.git], I think we should add margin-right: 0 to .trac-fullwidth just like margin-left: 0.

  • trac/htdocs/css/trac.css

    diff --git a/trac/htdocs/css/trac.css b/trac/htdocs/css/trac.css
    index 49a88f0..274761f 100644
    a b textarea.trac-fullwidth, input.trac-fullwidth {  
    187187 -moz-box-sizing: border-box;
    188188 box-sizing: border-box;
    189189 margin-left: 0;
     190 margin-right: 0;
    190191 width: 100%;
    192193textarea.trac-fullwidth { padding: 2px; }

comment:6 by Ryan J Ollos, 6 years ago

It seems that the rule trunk/trac/htdocs/css/report.css@12954:96#L84 has no effect, but it would be good to have a small amout of spacing between the label and textarea.

comment:7 by Ryan J Ollos, 6 years ago

API Changes: modified (diff)
Release Notes: modified (diff)
Resolution: fixed
Status: assignedclosed

Committed to 1.0-stable in [12976], merged to trunk in [12977]. I incorporated the comment:5 suggestion. comment:6 will be addressed in #11664 (see comment:10:ticket:11664).

Modify Ticket

Change Properties
Set your email in Preferences
as closed The owner will remain Ryan J Ollos.
The resolution will be deleted. Next status will be 'reopened'.
to The owner will be changed from Ryan J Ollos to the specified user.

Add Comment

E-mail address and name can be saved in the Preferences .
Note: See TracTickets for help on using tickets.