Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Select2 theme does not initialize properly, documentation missing


Hi,

In a similar notion to the question I asked here, https://devs.keenthemes.com/question/alert-style-does-not-initialize-according-to-documentation

I have encountered an issue where the theme for select2 dropdowns does not initialize correctly with supplied documentation

https://preview.keenthemes.com/metronic8/demo1/documentation/forms/select2.html#multiple-selection


The issue here is that there is a theme selection process...

The select2 appearance in the documentation and metronic demo 1 examples uses the "bootstrap5" theme designation, but with a standard implementation of select2 as per the docs, the dropdown will adopt the "default" theme, which is substantially more ugly

The css class that controls all of this is dynamic and controlled by the JS lib, so I cannot easily "hack it".

I assume you guys have a way of forcing the theme because your implementations look correct... I am just not sure how you are doing it, it does not appear to be tag/attribute based.


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 (4)


I have been able to circumvent this issue by applying a custom attribute as defined in the select2 documentation

https://select2.org/configuration/data-attributes

By applying data-theme='boostrap5' to the tag, you can get the desired appearance

I think that this should be highlighted in the docs and/or a more official solution be in place



Hi,

The multiselect Select2 example should work as its working in the preview and documentation. May I know what is your Metronic version?

Regard.



Noted, we will double-check it.


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  :(