calcite-design-system
calcite-design-system copied to clipboard
Inactive `input-message` adds white-space below a `label`
Actual Behavior
Given a <calcite-label>
that contains a <calcite-input>
and an inactive <calcite-input-message>
, its bottom white-space is greater than a <calcite-label>
that only contains a <calcite-input>
.
Expected Behavior
Given a <calcite-label>
that contains a <calcite-input>
and an inactive <calcite-input-message>
, its bottom white-space is the same as a <calcite-label>
that only contains a <calcite-input>
.
Reproduction Sample
https://codepen.io/nwhittaker-esri/pen/QWmBoEe
Reproduction Steps
- Visit the code sample
- Note how the boxes around each
<calcite-label>
are different heights
The height of the 2nd box should match the height of the 1st box.
Reproduction Version
beta.86
Relevant Info
This inconsistency adds difficulty to maintaining a vertical rhythm within a form that includes only some inputs with an assoc. input message.
A quick fix could be to give <calcite-input-message>
a display: none
style when its active
attribute is absent.
Regression?
No response