Any way to make this work with select2?

[zelenij]

This is a great piece of work, my web site looks very material! One thing is missing - there are no searchable select box options. A third party plugin for JQery exists, but it doesn't play nice with this whole setup. Any ideas on how to fix it? https://select2.org/ - the resulting selects show up as "regular" bootstrap ones (or even plain ones, can't really tell). Kinda breaks the whole visual consistency of my forms...

[justlevine]

What specifically is the problem? Select2 works fine on my install...

[zelenij]

Well, the ones with select2 look different. Here is a screenshot for illustration - there are two selects side by side, the one on the left is unmodified, the one on the right is with select2. Note the rounded appearance of the frame etc.

[justlevine]

Ahh so its not that select2 doesnt work, its that it has its own css styles? Try googling select2 material themes and you should find a bunch of 3rd-party css files. Based on your screenshot this one seems like itl fit https://codepen.io/rpuga/pen/Baypwpr

[zelenij]

Well, I tried that, and I found the same link you shared. However, the end result was kinda ugly and not matching what you can see in codepen. I suspect it might be clashing with material design UI. Obviously, this probably can be debugged, but I was wondering if this is something other people have already figured out.

[tbuyle]

I use Select2 with Material (Daemonite version) with some CSS and it works ok.

Here is a GIST with my sccs : https://gist.github.com/tbuyle/4b6aa8c2fe7dfaea1103c0f7eb76fc1c

It's certainly not 100% perfect but it does the trick for me.

[zelenij]

@tbuyle I tried compiling your scss to CSS using a command line tool, but it failed :)

[tbuyle]

This SCSS depends on variables from Bootstrap and material and can not be compiled alone.

[djibe]

I'm working on it

[djibe]

Working on the default one.

you will be able to set: theme: 'outlined' for this

I have to do:

• [X] Merge Select2 + Select2 Bootstrap4 + djibe SCSS sources for lighter theme
• [X] Default theme
• [X] Outlined theme
• [X] Filled theme
• [X] Line ripple
• [X] Disabled
• [X] Searchbox and results
• [X] Fix optgroup
• [X] Multiple select + select icon animation
• [X] Validated form
• [X] Dropdown above
• [ ] Merge WIP in Daemonite Material
• [ ] Documentation for plugins (ionRangeSlider, Maxlength, Select2, Autosize for now)

[zelenij]

Thanks! I knew it wasn't trivial :)

[djibe]

Hi @zelenij , here is a first version : https://gist.github.com/djibe/2f394a3c7e7eb2510a801cce976ad6f1 Standalone (don't import any Select2 css file). Don't set a theme or set it to 'outlined'

Optgroup is bugged Searchbox is ugly

[djibe]

Hi, I updated Gist with default, or theme 'outlined' and theme 'filled'. Can you test it ?

[zelenij]

Thank you @djibe, will give it a go and update

[zelenij]

To be honest, I don't see much difference - the only thing, select drop down looks more material:

I copied your gist into a css file and linked it to my site, I presume this is how it is supposed to be used?

Select2@4.1.0-beta.1 . Also tried 4.0.13, but actually looks ugly :)

[djibe]

Hi, don't import any other Select2 css. Use latest Select2. Set theme: 'outlined' (or 'filled') I updated Gist right now.

I'm nearly done with multiple select.

[zelenij]

I think it's better, but with filled theme the multi-select looks kinda dodgy:

[djibe]

I'm not done with Multiple version.

[djibe]

@zelenij Think I got it. See my gist. $(".js-example-basic-single").select2({ theme: "filled", placeholder: 'Fruit', width: '300px', multiple: true, // minimumResultsForSearch: Infinity / Hide search on single / });

Select2 width has to be set with JS.

For a simple single select, I use a minimum 200px width that don't have to be manually set. Tell me if you experience bugs.

[zelenij]

Visually looks better! I think there is a bug however:

I select the first item from the drop down. If I close the drop down it is not shown in the main area:

Selecting other items seems to work, so it is not consistent. Nothing in the error console.

If I switch to vanilla select2, it works as expected:

[djibe]

True. This is because I tested with a placeholder (so a first blank option). i'll try to fix it tonight.

[djibe]

@zelenij Updated gist. Hope it is final version :D Is it good for you ?

[djibe]

@zelenij Hi, is the latest Gist update good for you ?

[zelenij]

@djibe - sorry for not coming back earlier, was dealing with unrelated stuff. Looks fine now, thanks. Is there a way to control the height of the multi-select box? See how a single and multi-select ones differ here?

[djibe]

Hi @zelenij Normaly the filled theme is 56px height. I updated gist. You may try again.

[zelenij]

I don't see any difference to be honest. And looking at the latest commit in the gist, I see that the only change is the background image. Maybe you didn't push the rest of it? :)

[djibe]

You can use material-plugins.css to style select2. Set theme to "", "filled" or "outlined". Doc is on the way

[djibe]

Hi. You can use material-plugins.css from the dist folder and use Select2 as usual (don't set a theme, or set 'filled' or 'outlined')

[zelenij]

Thanks, will give it a try

[djibe]

Here it is: https://djibe.github.io/material/docs/4.5/plugins/select-select2/