Fixing the Width of a Select 2 with a Long Value in a Bootstrap Form Group or Input Group

If you have a Select2 control within a form-group or input-group div in a Bootstrap UI, a long value can cause the Select2 to grow to become wider than its container. In this post, I’ll show how to fix the issue.

The Problem with Large Values

In this demo, I have a form with two columns of fields, each within a well (which makes the container size very clear).

Select2 Long Values - A

In one field, there is a very long value. This usually isn’t an issue when you have explicit control over the options, but if you have an application where a drop-down box’s choices come from a plain text field on other documents, it’s possible.

Select2 Long Values - B

When I select the long value, it limits the amount of text displayed in the box to what will fit on one line, but it expands the size of the Select2 outside of its container.

Select2 Long Values - C

If I remove the second column of fields and re-test, it looks like the Select2 was enlarged to be the same the size as the parent container, which is too big for the area that it’s supposed to be in.

Select2 Long Values - C2

Fixing with CSS

This is a known issue with Select2 inside of a form-group or input-group within Bootstrap.

Fortunately, there’s a simple CSS fix, adapted from this post on github

.form-group .select2-container {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
  display: table;
  table-layout: fixed;
}

If you’re using an input-group instead of a form-group, then change the first line to this:

.input-group .select2-container {

Select2 Long Values - D

Advertisements

18 responses to “Fixing the Width of a Select 2 with a Long Value in a Bootstrap Form Group or Input Group”

  1. Takalani says :

    Works like charm

  2. Paolo Broccardo says :

    Thanks – worked perfectly!

  3. егор михеев says :

    Thanks, you helped to me!

  4. Raúl says :

    dude!! You are awesome!! You save me a lot of time!! thank you very much!!

  5. Allan says :

    Muito bom o post, funcionou certinho… Obrigado.

  6. Ish says :

    Fabulous. I had to remove float: left and add !important after width:100% but other than that, this did the trick.

  7. Miguel says :

    or just the styleClass=”form-control” to your select if you are using bootstrap. This will do all that nice work for you without any extra css

  8. Razi Ahmed says :

    thanks alot

  9. June says :

    Looking for select2 and rails implemention. This will come out handy.

  10. Kishan Tiwari (@kishantiwarifit) says :

    Awesome dear, it worked like a charm 🙂

  11. aruna says :

    superb Sir..very useful for me

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: