I am currently utilizing a plugin for my select html element, which can be found at
While the plugin is functional, I am encountering issues when using it within an element with the style overflow: hidden, as it only displays a portion of the select option values.
This behavior is demonstrated in the following JSFiddle when selecting Seller.
<div class="form">
<div class="content form-horizontal">
<div class="form-group">
<label class="col-md-3">Name</label>
<div class="col-md-7">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-md-3">Seller</label>
<div class="col-md-7">
<select id="multiple-select" multiple>
<option>John</option>
<option>David</option>
<option>Muller</option>
<option>Maria</option>
<option>Britney</option>
<option>Mario</option>
<option>Fellaini</option>
<option>Mark</option>
</select>
</div>
</div>
</div>
</div>
The .form div has the following CSS:
.form
{
overflow: hidden;
background-color: #fff;
padding: 15px;
}
How can I rectify this issue to ensure all elements are visible?