CODEWITHSUNDEEP
jquerycsstwitter-bootstrapjquery-select2
Seth
Seth

Reputation: 1255

Text cut-off with Select2 and Bootstrap

I'm currently having an issue with a form that uses Select2 to make a selection look nicer (and more functional) in combination with a bootstrap layout.

The issue is that the longest element(s) of a selection are cut off after they're selected. While it's not an issue for the selection itself, it looks strange (especially with short values) and makes it unnecessary hard for users to check what they selected. See the following screenshot for an example. In that case a user would not be able to check whenever he selected A or B without reopening the selection list.

selection error

From what I can tell the issue might be caused by the width set on the top level span that is used by Select2 to do its thing. I'm unsure on how to fix it and what would be the best approach to do so. It feels like it would be the best to make that top level span ever so slightly bigger but I'm not sure how to figure out where it's set.

Another approach would be to set the text-overflow attribute to not be ellipsis. But I feel like I'm missing something more obvious. I can't image that this hasn't been an issue before.

Are my approaches sound or am I missing an option for Select2 that could fix this?

The code for a MWE is as follows, using JQuery 1.12 and Select2 4.0.3. It's also available as a fiddle.

<html>
<head>
    <link rel="stylesheet" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
    <script type="text/javascript" src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>

    <script>
    $(document).ready(function() {
        console.log("JS");
      $("select").select2({});
    });
    </script>
</head>
<body>
    <select id="selection">
      <option>Something</option>
      <option>Something different A</option>
      <option>Something different B</option>
    </select>
</body>
</html>

Upvotes: 2

Views: 5270

Answers (7)

Dula
Dula

Reputation: 1412

This CSS code fixed my issue.

.select2-container .select2-selection__rendered > *:first-child.select2-search--inline {
    width: 100% !important;
}
.select2-container .select2-selection__rendered > *:first-child.select2-search--inline .select2-search__field {
    width: 100% !important;
}

Reference :- GitHub

Upvotes: 0

hisenberg
hisenberg

Reputation: 167

This seems to work best because the select2 uses flexbox:

.select2-selection--multiple .select2-search.select2-search--inline {
     flex-grow: 1;
}

Upvotes: 0

Evan
Evan

Reputation: 1082

I can do it directly in the definition of your select2, like this:

selection = $('#selection');        
selection.select2({
  width: 'auto !important'
});

Upvotes: 0

Igorski88
Igorski88

Reputation: 1173

I had the same issue and after much research, this is a known issue since 2012, and looks like it will be fixed in Select2 4.1.0-beta.0

Github issue

For now, you can temporarily fix it by using the following CSS:

.select2-selection--multiple .select2-search--inline .select2-search__field {
       width: auto !important;
}

Upvotes: 1

Sahil Dhir
Sahil Dhir

Reputation: 4240

You can wrap the select with a wrapper div and give that wrapper a max-width and giving the select width:100%.

HTML-

<div class="select--wrapper">
  <select id="selection">
      <option>Something</option>
      <option>Something different A</option>
      <option>Something different B</option>
    </select>
</div>

Css-

.select--wrapper {
  max-width: 200px;
  width: 100%
}

#selection {
  width: 100%;
}

Here is an working example-

$(document).ready(function() {

  $("select").select2({});
});
.select--wrapper {
  max-width: 200px;
  width: 100%
}

#selection {
  width: 100%;
}
<link rel="stylesheet" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>


<div class="select--wrapper">
  <select id="selection">
      <option>Something</option>
      <option>Something different A</option>
      <option>Something different B</option>
    </select>
</div>

Upvotes: 1

v-stackOverFollower
v-stackOverFollower

Reputation: 595

you can also add padding in the select div like this

#selection{padding:10px;}
<html>
<head>
    <link rel="stylesheet" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
    <script type="text/javascript" src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>

    <script>
    $(document).ready(function() {
        console.log("JS");
      $("select").select2({});
    });
    </script>
</head>
<body>
    <select id="selection">
      <option>Something</option>
      <option>Something different A</option>
      <option>Something different B</option>
    </select>
</body>
</html>

Upvotes: 4

LKG
LKG

Reputation: 4192

Try this:

If you set the min-width so you will rid out with small text. 

#selection {
  min-width:150px;
}

Upvotes: 1

Related Questions