#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 )
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)
Change History (11)
Changed 13 years ago by
Attachment: | button_sizing.png added |
---|
comment:1 Changed 13 years ago by
Description: | modified (diff) |
---|
comment:2 Changed 13 years ago by
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 13 years ago by
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 13 years ago by
Resolution: | → fixed |
---|---|
Status: | new → closed |
(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 13 years ago by
comment:6 Changed 13 years ago by
comment:7 Changed 12 years ago by
Summary: | Button: buttons and input elements have difficult size relationship → Button: 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):
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.
Changed 12 years ago by
Attachment: | before.png added |
---|
screen shot before the change, showing misalignment
Changed 12 years ago by
screen shot after the change, fixing misalignment
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: