calcite-design-system icon indicating copy to clipboard operation
calcite-design-system copied to clipboard

Inactive `input-message` adds white-space below a `label`

Open nwhittaker opened this issue 2 years ago • 0 comments

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

  1. Visit the code sample
  2. 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

nwhittaker avatar Aug 10 '22 18:08 nwhittaker