Make chosen look like Bootstrap input

[robinpoort]

https://fk.github.io/select2-bootstrap-css/

[johanjanssens]

@robinpoort Is this something that you can get in for the 1.1 release or too much work ?

[robinpoort]

@johanjanssens It should be as easy as adding the CSS and add a setting to each select2 instance. This is working for select2 versions 3.3.2 and 3.4.1 at least (http://t0m.github.io/select2-bootstrap-css/3.3.2.html). Probably for other versions as well.

Want me to check this out and try to implement this?

[johanjanssens]

@robinpoort Yes please can you handle this ?

[robinpoort]

@johanjanssens Fixed this in branch 286. Since it's the platform I had to style the chosen selectboxes instead of select2 since Joomla is using chosen by default. Luckily there was also a GH Repo for chosen Bootstrap styling. I had to customize it since Joomla changed all class names to chzn though.

Tested on latest: Chrome, Safari, Firefox, Opera and IE Edge

The whole platform could use some love on IE11 and down but I guess we're not developing for these broswers? Focusing on Chrome and Firefox mainly?

[johanjanssens]

@robinpoort Good work. Tested and everything looks great. I did notice that all the select boxes are stretching max width ? Is that the intend ?

[robinpoort]

@johanjanssens That was already the case when I started :)

I can probably make them smaller by default if you want to? (Not sure tho since JS is attaching style="width:xxx;" to the element as well.)

[johanjanssens]

@robinpoort For some pages these things are really long. What do you suggest ?

[robinpoort]

@johanjanssens They are as long as the regular inputs right? I would keep it this way for now. If we give them a set width they might look weird on some resolutions. For example if the text inputs are always 100% wide and the select2 isn't, then for example the text input could be 450px on certain resolution whole the select2 is 440px. That would look like a styling bug while it's not. If we decide to make them smaller I'd make everything smaller.

But then if it smaller while the content inside it is wider, you get inline scrolling in the text input and not fitting items in the select2 dropdown.

Long story short, keep it as is or throw some good hours to it to find a decent solution (probably having to add some JS as well)

[johanjanssens]

Agreed.