We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
Stacking multiple checkboxes with multiline labels results in them overlapping each other:
Angular, JavaScript
v2.1.0
<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>
The text was updated successfully, but these errors were encountered:
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>
it is up to you
Sorry, something went wrong.
Will be closed by #1273
No branches or pull requests
Prerequisites
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.
The text was updated successfully, but these errors were encountered: