# Hit area of some components spans the whole row

**URL:** <https://forums.creativeclouddeveloper.com/t/hit-area-of-some-components-spans-the-whole-row/504>\
**Category:** UXP Plugin API\
**Tags:** ui, api-feedback\
**Created:** [December 10, 2018, 11:01pm UTC](https://forums.creativeclouddeveloper.com/t/hit-area-of-some-components-spans-the-whole-row/504 "2018-12-10T23:01:12Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Velara](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/velara/32/1278_2.png) [@Velara](https://forums.creativeclouddeveloper.com/u/Velara)\
**Post date:** [December 10, 2018, 11:01pm UTC](https://forums.creativeclouddeveloper.com/t/hit-area-of-some-components-spans-the-whole-row/504/1 "2018-12-10T23:01:12Z")

</div>

### 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

![video](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/1X/08b36f556aa389e403a15d7a82b0424515ad2346.gif)

---

<div class="post-metadata">

**Author:** ![Velara](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/velara/32/1278_2.png) [@Velara](https://forums.creativeclouddeveloper.com/u/Velara)\
**Post date:** [January 12, 2019, 12:51pm UTC](https://forums.creativeclouddeveloper.com/t/hit-area-of-some-components-spans-the-whole-row/504/2 "2019-01-12T12:51:00Z")

</div>

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>

```

> **[: The Label element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)**
>
> The HTML element represents a caption for an item in a user interface.

---

<div class="post-metadata">

**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\
**Post date:** [January 16, 2019, 2:46am UTC](https://forums.creativeclouddeveloper.com/t/hit-area-of-some-components-spans-the-whole-row/504/3 "2019-01-16T02:46:40Z")

</div>

So the expected pattern for labels in XD is this:

```html
<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:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/1X/5109876646923ac1eb4672afcf7ed5137e8219dc.png)

When you want to group two side-by-side, use the following pattern:

```html
<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:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/1X/bdb760281f09a14831c4be57b5b9f31d14bcee29.png)

Clicks on one won’t have an effect on the other.

---

<div class="post-metadata">

**Author:** ![Velara](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/velara/32/1278_2.png) [@Velara](https://forums.creativeclouddeveloper.com/u/Velara)\
**Post date:** [January 16, 2019, 2:54pm UTC](https://forums.creativeclouddeveloper.com/t/hit-area-of-some-components-spans-the-whole-row/504/4 "2019-01-16T14:54:19Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\
**Post date:** [January 16, 2019, 4:40pm UTC](https://forums.creativeclouddeveloper.com/t/hit-area-of-some-components-spans-the-whole-row/504/5 "2019-01-16T16:40:37Z")

</div>

Here’s the UI guidelines on checkboxes: [https://adobexdplatform.com/plugin-docs/reference/ui/elements/checkboxes.html#anatomy](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.

---

<div class="post-metadata">

**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\
**Post date:** [January 16, 2019, 8:14pm UTC](https://forums.creativeclouddeveloper.com/t/hit-area-of-some-components-spans-the-whole-row/504/6 "2019-01-16T20:14:49Z")

</div>

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.