Velara
December 10, 2018, 11:01pm
1
Issue
When adding some components to a row the hit area for the component spans the whole row.
Steps to reproduce
Add the following to create checkboxes and labels on the same row:
let spacerWidth = 42;
let elementDialogLabelWidth = 120;
h("label", { class: "row", style: { alignItems:"center" } },
h("span", { style: { width: elementDialogLabelWidth } }, ""),
h("span", { style: { width: elementDialogLabelWidth }, title:"" }, "Center Horizontally"),
h("input", { type: "checkbox", checked: false,
onchange(e) { }}),
h("span", { style: { width: spacerWidth } }, ""),
h("span", { style: { width: elementDialogLabelWidth }, title:"" }, "Center Vertically"),
h("input", { type: "checkbox", checked: false,
onchange(e) { }}),
)
Click on the first checkbox.
Click to the left and right of it of the first checkbox.
Expected Behavior
When clicking the checkbox the checkbox is toggled on and off. When clicking the row, the labels nothing should happen since they do not have event handlers.
Actual Behavior
When clicking the checkbox the checkbox is toggled on and off. When clicking the row, the checkbox is toggled on and off.
Additional information
Velara
January 12, 2019, 12:51pm
2
The cause of this is from the use of Label
as a container. I’ve switched to using div
as a workaround.
Update:
Not a bug. Apparently label is both a singleton element (how I knew it) and a container element.
Used as a singleton:
<div class="preference">
<label for="cheese">Do you like cheese?</label>
<input type="checkbox" name="cheese" id="cheese">
</div>
Used as a container:
<div class="preference">
<label>Do you like peas?
<input type="checkbox" name="peas">
</label>
</div>
So the expected pattern for labels in XD is this:
<label class="row" style="align-items:center"> <!-- style is optional, and coming by default in a future release -->
<input type="checkbox"/>
<span>Do you like peas?</span>
</label>
Which renders as such:
When you want to group two side-by-side, use the following pattern:
<div class="row">
<label class="row" style="align-items:center"> <!-- style is optional, and coming by default in a future release -->
<input type="checkbox"/>
<span>Center Horizontally</span>
</label>
<label class="row" style="align-items:center">
<input type="checkbox"/>
<span>Center Vertically</span>
</label>
</div>
Which will render as follows:
Clicks on one won’t have an effect on the other.
3 Likes
Velara
January 16, 2019, 2:54pm
4
The examples work great! Is there a style guide for checkboxes? What I mean is it recommended to put the checkbox first and label after?
style is optional, and coming by default in a future release
Does this mean style is not supported on tags now? Or in the future labels will have align-center style by default?
Here’s the UI guidelines on checkboxes: https://adobexdplatform.com/plugin-docs/reference/ui/elements/checkboxes.html#anatomy
It’s not explicitly called out that labels align to the right of the checkbox, but that’s the usual pattern on both macOS and Windows.
1 Like
Oh, as to style
– just means that the row
class will have the align-center
by default in the future so that you don’t have to specify it yourself to get the layout to appear centered. But for now, continue to apply it, since I don’t know exactly when that change will drop.
1 Like