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
Am I missing a class or something?
This is the snippet I used to test:
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: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.
May I know your Metronic version ?
You can check it in the current version Select2 Floating Labels.
Regards.
8.1.0
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
And recompile the assets with gulp or webpack.
Regards.
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
Your Support Matters!
We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
React Dev Vacancy
KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
