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

Fix long text causing the search box and selections to overflow on multiple selects #5964

Merged
merged 4 commits into from
Jan 5, 2021

Conversation

kevin-brown
Copy link
Member

This pull request includes a

  • Bug fix
  • New feature
  • Translation

The following changes were made

  • Set max-width on search box and selection area
  • Pinned the "clear" icon to the top right on multiple selects

If this is related to an existing ticket, include a link to it as well.
Fixes #5863.

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.
@kevin-brown
Copy link
Member Author

Chrome
image

IE
image

@kevin-brown kevin-brown merged commit a16a268 into develop Jan 5, 2021
@kevin-brown kevin-brown deleted the GH-5863 branch January 5, 2021 03:32
@kevin-brown kevin-brown added this to the 4.1.0 milestone Jan 5, 2021
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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4.1.0 Beta text wrapping or not aligned.
1 participant