Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Blank options are very small #65

mimopo opened this Issue Feb 21, 2013 · 8 comments


None yet
6 participants

mimopo commented Feb 21, 2013

Hi! Nice plugin!

But I've found a little bug. If you have a select box with a blank option, for example:

<select name="example">
    <option value=""></option>
    <option value="4">Number 4</option>
    <option value="5">Number 5</option>

You will get something like this
Captura de pantalla 2013-02-21 a la s 19 39 06

I've fix with this code:

this.$element.find('option').each(function() {
    var optionClass = $(this).attr("class") !== undefined ? $(this).attr("class") : '';
    var text = $(this).text() != '' ? $(this).text() : '&nbsp;';
    if ($(this).parent().is('optgroup')) {
        if ($(this).index() == 0) {
            if ($(this)[0].index != 0) {
                    '<dt class="optgroup-div">'+$(this).parent().attr('label')+'</dt>'+
                    '<a tabindex="-1" class="opt '+optionClass+'">'+text+'</a>'
            } else {
                    '<a tabindex="-1" class="opt '+optionClass+'">'+text+'</a>'
        } else {
             _liA.push('<a tabindex="-1" class="opt '+optionClass+'">'+text+'</a>');
    } else {
        _liA.push('<a tabindex="-1" class="'+optionClass+'">'+text+'</a>');

Google Chrome, MacOS X Mountain Lion


caseyjhol commented Feb 21, 2013

Good catch! I'll implement this in the next update.

mimopo commented Feb 21, 2013


@caseyjhol caseyjhol closed this in 4466aa0 Feb 26, 2013

@caseyjhol caseyjhol added a commit that referenced this issue Feb 26, 2013

@caseyjhol caseyjhol Merge pull request #67 from caseyjhol/master
Fix #65. Update divider styles and include data-divider from #48

@caseyjhol caseyjhol added a commit that referenced this issue Aug 6, 2013

@caseyjhol caseyjhol Fix #183
Remove min-height requirement as it's no longer required to fix #65

jhephs commented Mar 2, 2014

Is this not working again?

Looking at https://github.com/silviomoreto/bootstrap-select/blob/master/bootstrap-select.css#L147

.bootstrap-select.btn-group .dropdown-menu li > a {
    cursor: pointer;

The min-height is not there?


caseyjhol commented Mar 4, 2014

min-height isn't needed any more, as the formatting has changed. There's now a .text span inside that gives the li the proper height.

Using bootstrap 3.1.1 and bootstrap-select 1.5.4, I'm seeing the same problem with an empty option (height) as mimopo pointed out originally.

I still have this issue, but with <optgroup> being empty.


t0xicCode commented Aug 11, 2014

Could you provide me with a jsfiddle?

@t0xicCode t0xicCode reopened this Aug 11, 2014

Man, for the life of me, I can't create a working jsfiddle! I don't know what's wrong (probably something not loading), but here is what I have (although the fiddle is not working):

@caseyjhol caseyjhol closed this Apr 24, 2015

@frlinw frlinw referenced this issue Aug 6, 2015


Min-height issue #1119

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment