Getting style conflicts?

[shentao]

Getting style conflicts?

[shentao]

I know where is the problem with the partially hidden text.
Will fix this in a moment for case: multiple="false" && searchable="true". As for multiple="true", the search input can’t be full width, as it has to fit next to the selected options/tags. Calculating the width in such case would feel a bit like overhead.

The select is using rem for all kind of sizes, so please look for you HTML font-size declaration. The calculation is based on the default 16px font-size that you have in most browsers. This way the select should scale properly if a user increases font-size for the whole browser.
The other thing that is inherited from parent container is font-family.
There should be no conflicts with bootstrap styles besides those.

[shentao]

@jpmurray Fixed in 0.1.8 :)

[jpmurray]

@shentao Welp, that was fast ;-) Visual bug is gone indeed, so that is ok.

I found the reference in Bootstrap 3.3.6 that makes the dropdown small, line 23. I'm not sure why, but the reset Bootstrap makes seems to take precedence in your code.

The thing is tough, is that looking at the style from Chome's inspector, it seems that is't not applied (it's striked through), but activating/deactivating it does influence the size of the select element?

with the element activated

with the element deactivated

One last thing I noticed, the loading icon seems to get partially hidden, like the text was before, as seen in the image down here.

(I'm throwing it all here, if you prefer that I open other issues, please do tell!)

[shentao]

As I thought, this is a problem from rem unit as it is based on html { font-size: 10px } this is 1rem = 10px. I hardly ever use bootstrap. Is this change mandatory? I usually prefer using rem for scalability but in this case, it feels like a shot in the feet.
How does removing font-size: 10px affect your page?
Some frameworks (like Foundation) use a rem-calc function where you pass pixels and it calculates the rem value. Usually, you can change the base for calculations in the framework’s configuration file.
Given 10px html font-size, 24px would equal (24 / 10) + 'rem' => 2.4rem. If you change it to 16px it shouldn’t affect your page, but actually fix the problem with multiselect.

Will double check the loading icon, thanks for noticing!

Let me know if this helps!

[jpmurray]

Looks like it doesn't changing from 10px to 16px won't change a thing. The only trouble I have is that I compile it directly from the less file in Gulp, and the CSS reset doesn't use use variables, so I kind of have to hack it after I compile it if I don't want to mess with the source. But hey, that's not on your end! ;-) I'm just dropping this here so anyone having the same problem can find themselves a solution!

Thank you!