Here is how I am using a select:
$(document).ready(function()
{
$('.select2-multiple-choices').select2(
{
placeholder: 'Select one or more fields'
});
});
.select2-selection--multiple:after
{
content:"";
position:absolute;
right:10px;
top:15px;
width:0;
height:0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #888;
}
.outer {
padding-top: 40px;
padding-bottom: 40px;
padding-left: 30%;
padding-right: 30%;
background-color: #eee;
}
.select2-container
{
width: 100% !important;
}
<div class="outer">
<select class="select2-multiple-choices select2-choice" multiple="multiple"
th:field="*{parameters}">
<option th:each="option : ${searchoptions}" th:value="${option.getKey()}"
th:text="${option.getValue()}"></option>
</select>
</div>
When I open the dropdown menu, excess space is created on the right of the actual page. You can see it here https://i.sstatic.net/YmtVI.png Before opening the dropdown
https://i.sstatic.net/PFeaG.png
After the dropdown menu is opened
How do I prevent this space from appearing?