Button: buttons and input elements misaligned vertically with native counterparts

[alex]

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.

[bill]

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".)

[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.

[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.

[bill]

(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.

[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.

[bill]

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

[bill]

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):

And here's what it looks like after:

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.

[bill]

screen shot before the change, showing misalignment

[bill]

screen shot after the change, fixing misalignment

[liucougar]

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