Checkboxes with multiline label overlap each other

[Stefei]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

Stacking multiple checkboxes with multiline labels results in them overlapping each other:

What type of frontend framework are you seeing the problem on?

Angular, JavaScript

Which version of iX do you use?

v2.1.0

Code to produce this issue.

<div style="display: flex; flex-direction: column">
    <input type="checkbox" id="checkbox_01" />
      <label for="checkbox_01">Long Label 1: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</label>
      <input type="checkbox" id="checkbox_02" />
      <label for="checkbox_02">Long Label 2: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</label>
      <input type="checkbox" id="checkbox_03" />
      <label for="checkbox_03">Long Label 3: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</label>
    </div>

[ridvandmrc]

Hi @Stefei , You can manipulate it your side like:

<div style="display: flex; flex-direction: column">
  <input type="checkbox" id="checkbox_01" />
    <label style="display:block; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 90%;" for="checkbox_01">Long Label 1: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</label>
    <input type="checkbox" id="checkbox_02" />
    <label style="display:block; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 90%;"  for="checkbox_02">Long Label 2: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</label>
    <input type="checkbox" id="checkbox_03" />
    <label style="display:block; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 90%;"  for="checkbox_03">Long Label 3: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</label>
  </div>

result is like:

Other way is arrange the height of label:

  <div style="display: flex; flex-direction: column;margin-top: 4rem;">
    <input type="checkbox" id="checkbox_01" />
      <label style="height:unset; max-height: unset;" for="checkbox_01">Long Label 1: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</label>
      <input type="checkbox" id="checkbox_02" />
      <label style="height:unset; max-height: unset;" for="checkbox_02">Long Label 2: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</label>
      <input type="checkbox" id="checkbox_03" />
      <label style="height:unset; max-height: unset;" for="checkbox_03">Long Label 3: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</label>
    </div>

result is like:

it is up to you

[nuke-ellington]

Will be closed by #1273