Select2 + floating labels + multiple attribute
I got the same problem that someone else asked in this question.
This combination of select2 with floating labels and multiple selects causes the label to overlap the current selected options.
There is a rule in plugins.bundle.css that overwrites the padding-top from 2.15rem to calc((1.55rem + 2px - .8rem)/ 2). Disabling this rule fixes the problems apparently:
<img src="https://imgur.com/a/sW1pLBU" />
Am I missing a class or something?
This is the snippet I used to test:
<div class="form-floating border rounded mb-7">
<select class="form-select form-select-transparent" id="test1">
<option selected>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option>
</select>
<label>Test 1</label>
</div>
<div class="form-floating border rounded mb-7">
<select class="form-select form-select-transparent" multiple id="test2">
<option selected>1</option><option selected>2</option><option selected>3</option><option selected>4</option><option selected>5</option><option selected>6</option>
</select>
<label>Test 2</label>
</div>
<script type="text/javascript">
$("#test1").select2();
$("#test2").select2();
</script>
Replies (8)
Hi,
May I know your Metronic version ?
You can check it in the current version Select2 Floating Labels.
Regards.
Please check the above link where Select2 is properly used in the input group.
That's what I used as base for my test snippet
Hi,
We will release a fix for this issue in the next update.
In the meantime you can fix it in src/sass/vendors/plugins/_select2.scss
// Floating label integration
.form-floating {
.form-select {
padding-top: $form-floating-input-padding-t !important;
}
}And recompile the assets with gulp or webpack.
Regards.
Thank you 
You are most welcome. Thanks for bringing up this issue
