Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Checkboxes with multiline label overlap each other #1226

Closed
2 tasks done
Stefei opened this issue Apr 17, 2024 · 2 comments
Closed
2 tasks done

Checkboxes with multiline label overlap each other #1226

Stefei opened this issue Apr 17, 2024 · 2 comments
Labels
type: bug Something isn't working Workflow: In progress Issue will be part of the next release
Milestone

Comments

@Stefei
Copy link

Stefei commented Apr 17, 2024

Prerequisites

  • I have read the Contributing Guidelines.
  • 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:

grafik

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>
@Stefei Stefei added the triage We discuss this topic in our internal weekly label Apr 17, 2024
@ridvandmrc
Copy link
Contributor

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:
image

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:

image

it is up to you

@nuke-ellington
Copy link
Collaborator

Will be closed by #1273

@nuke-ellington nuke-ellington added this to the 2.x.x milestone May 10, 2024
@matthiashader matthiashader added type: bug Something isn't working Workflow: In progress Issue will be part of the next release and removed triage We discuss this topic in our internal weekly labels May 14, 2024
@danielleroux danielleroux modified the milestones: 2.x.x, 3.0.0 Jun 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug Something isn't working Workflow: In progress Issue will be part of the next release
Projects
None yet
Development

No branches or pull requests

5 participants