Space between text and dropdown arrow about bootstrap-select

[maduhaime]

Maybe a non breakable space after __SELECTED_OPTION in your template!

[silviomoreto]

I will do that maduhaime, but not exactly that. I will make the selectpicker import the classes from select, so you can apply the span classes from bootstrap and bootstrap-select will react to that.

I need couple days to finish that...

If it is urgent you can change the css width of the a.dropdown-toggle by now..

[silviomoreto]

maduhaime, I did that.

Try this: <select class"selectpicker span3"></select>

It solves your problem?

[maduhaime]

No. It is not solving the problem. On document load, if an option is already selected, the space is perfect. The gap is reduced when a use change to another option. (under Firefox). I didn't test under other browser!

[maduhaime]

Can I send you a screenshot by email^

[silviomoreto]

This is an issue from bootstrap... you can solve it in three ways:

• Adding a custom with in css: a.dropdown-toggle { width: 100px; }
• Add a span class to your select: <select class"selectpicker span3"></select>
• Add a margin left in carret: span.caret { margin-left: 10px; }

I hope now it solves your problem

[maduhaime]

Thanks! The margin to the caret is probably the nicest solution (I my case). The content of the dropdown is generated by my application (Rails). I cannot set a fixed width.

I was previously developing with jQuery-UI and I was using plugins for select-menu and file-input. Those cosmetic element are still missing in Bootstrap.

Also, it was very easy to create nice buttons from group of or checkboxes. I'm still searching for solutions to replicate this.

I will have a closer look at your code. Maybe it will inspire me to develop new fonctionality!

Thanks again!

Marc

On 2012-11-23, at 2:57 PM, Silvio Moreto [email protected] wrote:

This is an issue from bootstrap... you can solve it in three ways:

Adding a custom with in css: a.dropdown-toggle { width: 100px; }
Add a span class to your select: <select class"selectpicker span3">
Add a margin left in carret: span.caret { margin-left: 10px; }
I hope now it solves your problem

—
Reply to this email directly or view it on GitHub.

[silviomoreto]

You are welcome. Please take a look at the code and if you find a bug, please open a issue!
Usually, when I need to custom a checkbox I use this lib: http://uniformjs.com/

[vlsg]

I have version 1.11.2 of bootstrap-select and I also have this problem. I attempted all of the css changes you suggested on 11/23/12 but none of them worked. Since no doubt a lot has changed in the past 5 yrs, do you have updated advice about how to make the button "title" not overlap the bs-caret? TIA

[etlel]

The space is absent for input-group-lg and input-group-sm classes, so I added the following:

.input-group-lg .bootstrap-select .filter-option{ padding-right:10px; }

.input-group-sm .bootstrap-select .filter-option{ padding-right:15px; }

[vivek-kandhvar]

This issue is seen again in 1.13.16. Is anyone aware of this yet?