Fix long text causing the search box and selections to overflow on multiple 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.

Author: kevin-brown

dist/css/select2.css

@@ -46,7 +46,8 @@
     font-size: 100%;
     margin-top: 5px;
     margin-left: 5px;
-    padding: 0; }
+    padding: 0;
+    max-width: 100%; }
     .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
       -webkit-appearance: none; }
 

src/scss/_multiple.scss

@@ -30,6 +30,7 @@
     margin-top: 5px;
     margin-left: 5px;
     padding: 0;
+    max-width: 100%;
 
     &::-webkit-search-cancel-button {
       -webkit-appearance: none;

src/scss/theme/default/_multiple.scss

@@ -4,16 +4,19 @@
   border-radius: 4px;
   cursor: text;
   padding-bottom: 5px;
-  padding-right: 5px;
+  padding-right: 25px;
+  position: relative;
 
   .select2-selection__clear {
     cursor: pointer;
-    float: right;
     font-weight: bold;
     height: 20px;
     margin-right: 10px;
     margin-top: 5px;
 
+    position: absolute;
+    right: 0;
+
     // This padding is to account for the bottom border for the first
     // selection row and the top border of the second selection row.
     // Without it, selections on the first row may be offset incorrectly
@@ -25,11 +28,21 @@
     background-color: #e4e4e4;
     border: 1px solid #aaa;
     border-radius: 4px;
+    box-sizing: border-box;
 
     display: inline-block;
     margin-left: 5px;
     margin-top: 5px;
     padding: 0;
+    padding-left: 20px;
+
+    position: relative;
+
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: bottom;
+    white-space: nowrap;
   }
 
   .select2-selection__choice__display {
@@ -54,6 +67,10 @@
 
     padding: 0 4px;
 
+    position: absolute;
+    left: 0;
+    top: 0;
+
     &:hover, &:focus {
       background-color: #f1f1f1;
       color: #333;