Skip to content

Panel UI Bug: Multiselect Field overflows out of box for longer text #7221

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

Open
samyouel opened this issue May 14, 2025 · 1 comment · May be fixed by #7254
Open

Panel UI Bug: Multiselect Field overflows out of box for longer text #7221

samyouel opened this issue May 14, 2025 · 1 comment · May be fixed by #7254
Assignees

Comments

@samyouel
Copy link

samyouel commented May 14, 2025

Description

For some reason after updating from Kirby v3 to v4 my multiselect fields overflow out of the box, when the text of the selected items is too long.
Is this just me or anyone else experiencing this?
https://shottr.cc/s/1OaI/SCR-20250514-qfh.png (for some reason the image upload in GitHub isn't working)

Expected behavior
I think it would make sense if the ellipsis css that is applied to the k-tag button inside the multi select also works, meaning that the text just gets truncated like this:
https://shottr.cc/s/1P67/SCR-20250514-qfh.png

Your setup

Kirby Version 4

Your system (please complete the following information)

  • Device: Mac Pro
  • Browser: Chrome
@samyouel
Copy link
Author

Currently, I've added this custom CSS to make it work, it's not particularly amazing, but maybe it can be a starting point for you guys :)

.k-input[data-type='multiselect'] {
  justify-content: space-between;
}

.k-input[data-type='multiselect'] > span.k-input-icon {
  max-width: 10%;
}

.k-input[data-type='multiselect'] > span.k-input-element {
  max-width: 90%;
}
.k-input[data-type='multiselect'] > span.k-input-element button.k-tag, .k-input[data-type='multiselect'] > span.k-input-element .k-tags {
  max-width: 100%;
}

@distantnative distantnative self-assigned this May 29, 2025
@distantnative distantnative linked a pull request May 29, 2025 that will close this issue
5 tasks
@distantnative distantnative linked a pull request May 29, 2025 that will close this issue
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging a pull request may close this issue.

2 participants