Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#6572 closed defect (fixed)

Button: buttons and input elements misaligned vertically with native counterparts

Reported by: alex Owned by:
Priority: high Milestone: 1.2
Component: Dijit - LnF Version: 1.1.0
Keywords: button Cc:
Blocked By: Blocking:

Description (last modified by bill)

by default, dijit buttons are much larger than the surrounding line-height. As a result, placing them inline with other input elements (including input dijits) results in badly mis-shapen layouts. For example, go to themeTester.html, open the "popups and alerts" accordion on the left, and then click on "Show Modal Dialog".

The contents of the resulting dialog places a ComboBox? in the same line as an inline button, and the size issues are clearly visible as a result. Button height should default to 100% of the current line-height unless otherwise specified by the widget user.

Attachments (3)

button_sizing.png (12.4 KB) - added by alex 11 years ago.
before.png (7.1 KB) - added by bill 11 years ago.
screen shot before the change, showing misalignment
after.png (7.3 KB) - added by bill 11 years ago.
screen shot after the change, fixing misalignment

Download all attachments as: .zip

Change History (11)

Changed 11 years ago by alex

Attachment: button_sizing.png added

comment:1 Changed 11 years ago by bill

Description: modified (diff)

I agree, makes sense to me for buttons to be the same height as other form widgets, and seems to be the standard. I think we can do that easily by adjusting Button font-size and padding.

As per your final comment that "Button height should default to 100% of the current line-height unless otherwise specified by the widget user.", there are couple issues with that so I don't think we can do it:

  • button height is determined by the button contents, so for example if the button contains an icon it will likely be taller
  • not sure inline/inline-block elements have concept of line-height; AFAIK they just have their own height.
  • as per 4/8/2008 dijit meeting (I wrote the results in #6307), input widgets won't inherit font-size or anything from the document. Thus if Button inherits height but the TextBox doesn't, they are likely to not match, defeating the original purpose. (Note however that Ctrl-+ will adjust the size of all elements on the page, even on legacy browsers, since font-size is specified in "em".)

comment:2 Changed 11 years ago by alex

hey bill:

so I can see the argument for not making buttons the same size as surrounding text content, but all of our input widgets *should* line up together regardless. That said, your last comment worries me some...will there be a global style which users can change to affect the dijit UI font sizing independent of the content such that things can be made to blend if need be? Having a parallel system is perhaps acceptable if it doesn't make it *too* much harder on designers....our goal has to be to give them what they'd *usually* want OOTB without extra work.

comment:3 Changed 11 years ago by bill

Agreed, should give developers what they'd *usually* want OOTB, and also should make it relatively easy for developers to change things like font-size for all the widgets (or at least for all the form widgets).

At the same time, it's good to not make it too difficult for a developer (or a new theme) to set, for example, serif for buttons and sans-serif for input widgets (or italic for buttons, or whatever). Nikolai was talking about this today; after these visual glitches (like this ticket) are fixed, we need to try refactoring the CSS class names / patterns / rules a bit and see what we can do.

comment:4 Changed 11 years ago by bill

Resolution: fixed
Status: newclosed

(In [13427]) Adjust size and vertical alignment of buttons and textbox-based widget to match each other and native controls. Actually, to really get them to match would need to add padding to the TextBox? based controls, which is difficult because it requires adjustments to the validation icon and drop down arrow (or multiple arrows, in the case of spinner), but this checkin gets things pretty close. Fixes #6572.

comment:5 Changed 11 years ago by bill

(In [13722]) Size note.gif to 16x16 like most other icons to prevent buttons from being different heights merely due to different icons. Refs #6572.

comment:6 Changed 11 years ago by bill

(In [14169]) Make test icons 18x18, rather than 16x16, to match editor icons. Refs #6572, #6935.

comment:7 Changed 11 years ago by bill

Summary: Button: buttons and input elements have difficult size relationshipButton: buttons and input elements misaligned vertically with native counterparts

Regarding [13427], as mentioned in the summary the test is themeTester.html, pressing the "Show Dialog" button. Here's what it looked like before the change (with the updated version of doc0.html to demonstrate problem more clearly):

screen shot before the change, showing misalignment

And here's what it looks like after:

screen shot after the change, fixing misalignment

Cougar points out that this change messed up alignment of ComboBox in a toolbar (specifically the editor toolbar), so we should add a toolbar specific CSS rule to set vertical-alignment to middle in that case. Perhaps a plain

.dijitToolbar * { 
   vertical-align: middle !important;
}

or something similar is appropriate.

Changed 11 years ago by bill

Attachment: before.png added

screen shot before the change, showing misalignment

Changed 11 years ago by bill

Attachment: after.png added

screen shot after the change, fixing misalignment

comment:8 Changed 11 years ago by liucougar

(In [16526]) refs #6572: fixes combobox vertical alignment in toolbar

Note: See TracTickets for help on using tickets.