Skip to content

bug: form controls in item are not interactive on start/end #27169

@liamdebeasi

Description

@liamdebeasi

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

Item adds margin to the start and end of the line which means that clicking those spaces causes form controls to not be interactive. In Ionic 6 we had a CSS hack to create an interactive element inside of the form control that covers the entire item:

input {
@include visually-hidden();
}

This resolves the issue for the end margin, but the start margin still was not interactive even in Ionic 6.

Expected Behavior

The checkbox should get checked.

Steps to Reproduce

  1. Open code reproduction.
  2. Click to the left of the label or to the right of the checkbox. Observe that the checkbox does not get checked.

Code Reproduction URL

https://codepen.io/liamdebeasi/pen/wvYKaEm

Ionic Info

N/A

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions