-
-
Notifications
You must be signed in to change notification settings - Fork 6.3k
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
Fix long text causing the search box and selections to overflow on multiple selects #5964
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This also adds a consistent padding to the right side of the selection area to allow the clear button to be absolutely positioned on the right side without having to worry about it colliding with one of the selected elements. This is not ideal since it always shows up, even when the clear button is not enabled. This is also not ideal since it maintains the padding for the second row and beyond, even though the clear button is not visible on those rows. We can see if we can work through those issues later. But for now it's working consistent in both Chrome and IE.
This should keep the search box set so it does not overflow the container that it is held within. So when people search for incredibly long strings, it properly maintains width and does not break out of the container and cause rendering issues.
This sets the max width on the individual selections such that selections with abnormally long width will not exceed the size of the container and break rendering. In order to remain consistent with how the display is done for a single select, we do not allow the contents of selection in a multiple select to break across lines. In order to fix a rendering issue that occurs when the `overflow` is set to anything other than `visible` on the list item, we set `vertical-align` to `baseline` to ensure that all of the list items are vertically aligned to the same location. If we don't set this, a channel that is roughly 5px tall starts to form between the rows. It's not clear what causes this channel to form but the current solution for working around it is to correct the vertical alignment which appears to cause it to collapse and not form.
This fixes an issue we saw with long text where if the text of the] selection was long enough, the close icon for the selection would be pushed to a second row. This is because the close icon was set to display as a block-like element and that will cause it to take it's own row when it needs to. Now we are absolutely positioning the clear icon with a padding applied so it always renders where we would normally expect it to.
7 tasks
anttikuuskoski
pushed a commit
to anttikuuskoski/select2
that referenced
this pull request
Mar 29, 2022
…ltiple selects (select2#5964) * Switch clear button to no longer be floated This also adds a consistent padding to the right side of the selection area to allow the clear button to be absolutely positioned on the right side without having to worry about it colliding with one of the selected elements. This is not ideal since it always shows up, even when the clear button is not enabled. This is also not ideal since it maintains the padding for the second row and beyond, even though the clear button is not visible on those rows. We can see if we can work through those issues later. But for now it's working consistent in both Chrome and IE. * Set max-width to 100% on search box This should keep the search box set so it does not overflow the container that it is held within. So when people search for incredibly long strings, it properly maintains width and does not break out of the container and cause rendering issues. * Set max-width on the individual selections This sets the max width on the individual selections such that selections with abnormally long width will not exceed the size of the container and break rendering. In order to remain consistent with how the display is done for a single select, we do not allow the contents of selection in a multiple select to break across lines. In order to fix a rendering issue that occurs when the `overflow` is set to anything other than `visible` on the list item, we set `vertical-align` to `baseline` to ensure that all of the list items are vertically aligned to the same location. If we don't set this, a channel that is roughly 5px tall starts to form between the rows. It's not clear what causes this channel to form but the current solution for working around it is to correct the vertical alignment which appears to cause it to collapse and not form. * Fix remove icon on selection pushing long text This fixes an issue we saw with long text where if the text of the] selection was long enough, the close icon for the selection would be pushed to a second row. This is because the close icon was set to display as a block-like element and that will cause it to take it's own row when it needs to. Now we are absolutely positioning the clear icon with a padding applied so it always renders where we would normally expect it to.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request includes a
The following changes were made
max-width
on search box and selection areaIf this is related to an existing ticket, include a link to it as well.
Fixes #5863.