select2 not working correctly on new laravel starter kit

select2 has no style in the new laravel starter kit

https://imgur.com/YPUVKw8

How can we fix the styles?

Thanks

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

Hi,

Sorry for the late reply. We will have a look at this shortly and get back to you accordingly.

Regards.

Hi Carlos,

Sorry for the delay. The style for select2 is already included. You can refer to the HTML version for any components. Please try the below code for Laravel.

<select class="form-select " data-control="select2" data-placeholder="Latest" data-hide-search="true">
<option value=""></option>
<option value="1" selected>Today 16 Feb</option>
<option value="2">In Progress</option>
<option value="3">Done</option>
</select>

image

Thanks

I can see the styles are included but it doesn't show as expected, they show as this https://imgur.com/YPUVKw8

I am using the new laravel starter kit, i also used the styles from the html version and got the same result in the new laravel starter kit. not working at all

Hi Carlos,

Have you tried to use this select2 HTML markup? The markup attributes, classes, etc also need to be correct.

This attribute also is required. data-control="select2"

<select class="form-select " data-control="select2" data-placeholder="Latest" data-hide-search="true">
<option value=""></option>
<option value="1" selected>Today 16 Feb</option>
<option value="2">In Progress</option>
<option value="3">Done</option>
</select>

Could you please show your select2 HTML markup?

Thanks

select2 is not working.

download the same laravel starterkit from here:

https://devs.keenthemes.com/metronic/laravel/demo1/download

do the normal installation proccess:

- composer install
- configure your .env
- php artisan migrate --seed
- yarn install
- yarn run prod

then login in your laravel starterkit, first check the select2 that is inside the search in the header and you'll see is not working properly its unstyled, then add your own code snippet you supplied to me into resources/views/pages/dashboards/index.blade.php and you'll see it's not working.

here are another captures:

https://imgur.com/FIryQe1

as you can see, it's not working at all.

Thank you, Carlos. We are checking them. We will give you a fix or workaround after we get a better solution.

thanks

Hi Carlos,

Sorry for the inconvenience. Here is the workaround. We will include the fix in the next updates soon.

In this file, please add below missing import:
/laravel_demo1/starterkit/resources/mix/plugins.scss

// Keenthemes Vendors customization
@import "../_keenthemes/src/sass/plugins";

Thanks

Still not working, does it has to be in a specific place ? I put it at the end of the file

Hi Carlos,

Yes, need to put it at the bottom. Have you rebuilt the assets?

npm run dev

Thanks

Hello, I put it at the bottom then rebuilt and cleaned cache, still not working

Hi,

We are including the Select2 issue for the new Laravel Starter Kit in the Metronic v8.1.7 update that we will be releasing this week. You can get the new update and retry.

If you need any further help please let us know after you try the new update this week.

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