In Alignment

I just fixed the part of the designer layout engine which aligns inline boxes. Specifically, I'm now computing the baseline of form components like buttons and textfields, such that rather than aligning the bottom of these with the text baseline, the baseline within the components are baseline aligned.

This looks a lot better - especially for things like radiobuttons. Take a look at the before and after shots. And unlike most weight-loss advertisements, I promise I'm using the same lighting and lens when taking these two snapshots:

Before

After

There's a lot to point out here. First, notice how the radio and check boxes now seem centered next to the text. Second, and more importantly, notice how the labels in front of the text field and dropdowns are properly aligned with the text inside these components. This points right to something else you should know about: the Label property of many of these components. If you set the label directly on the component, it's rendered along with the component and gets proper baseline alignment as shown here. If you drop a separate Static Text or Label yourself, it's not "one" with the component and won't move as a single unit, render into a single <span> rendered by the browser, etc.

Tip: Notice also that by setting the Required property on the dropdown and text fields, the label automatically got rendered with a little red asterisk indicating to the user that it's a required value. This even works when you use a separate Label component; as soon as you bind it to another component (by ctrl-click and dragging from one component to the other to link them) the required property will propagate to the label.

As another example of where the alignment bug shows up, take a look at the bottom row of the new table component once pagination has been added in its customizer. Notice how the Page text field is really misaligned from its "Page:" label. This was the bug that inspired me to fix this.

Here's how the bottom looks now - pretty darn close to what browsers will show:

I just put this fix in, so it will not be in the EA 2 bits. EA2 has left development engineering and is getting some TLC from the QA organization right now. Stay tuned.

Comments:

Post a Comment:
Comments are closed for this entry.
About

Tor Norbye

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today