Question

53

select2 is not showing arrow down icon

rated 0 times [ 54] [ 1] / answers: 1 / hits: 25473 / 7 Years ago, fri, september 22, 2017, 12:00:00

my select2 is working perfectly, I just have 1 small bug, the arrow down icon from the select box is not showing, do you know guys why?

Example

this make the user a bit confuse I tried find the bug, but I could not fix the error, can you please guys help me? the code is not working here but it is working in the jsfiddle link.

jsfiddle: http://jsfiddle.net/yszv1ob2/

$(#e1).select2();

<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>

<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js></script>

<script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js></script>

<script src=http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js></script>

<link rel=stylesheet href=http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css>



<select multiple id=e1 style=width:300px>

  <option value=AL>Alabama</option>

  <option value=Am>Amalapuram</option>

  <option value=An>Anakapalli</option>

  <option value=Ak>Akkayapalem</option>

  <option value=WY>Wyoming</option>

</select>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mustafaericho

Add To Favorites

Follow

Total Points: 322

Total Questions: 103

Total Answers: 110

Location: Montenegro

Member since Thu, Jun 16, 2022

2 Years ago

mustafaericho questions

1 npm i Error: `gyp` failed with exit code: 1

Mon, May 31, 21, 00:00, 3 Years ago

1 Node js, process.env not reading enviroment variables

Sun, May 23, 21, 00:00, 3 Years ago

1 Webpack erroring on mini-css-extract-plugin loader

Sat, Feb 13, 21, 00:00, 3 Years ago

1 Webpack processAssets hook and asset source

Sat, Jan 2, 21, 00:00, 3 Years ago

1 what is the default AES config in crypto-js?

Thu, Nov 12, 20, 00:00, 4 Years ago

View All

answered 7 Years ago jenna · Accepted Answer

You have used multi-select dropdown and used plugin(Select2) don't add dropdown arrow in multi-select dropdown. So if you want to add dropdown arrow, you have to add some custom CSS like below.

ul.select2-choices {

    padding-right: 30px !important;

}



ul.select2-choices:after {

    content: ;

    position: absolute;

    right: 10px;

    top: 50%;

    transform: translateY(-50%);

    border-top: 5px solid #333;

    border-left: 5px solid transparent;

    border-right: 5px solid transparent;

}