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:

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" >
<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 >
<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>

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (7)

link to the broken img tag: https://imgur.com/a/sW1pLBU

(I can't edit the question for some reason)

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.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(