Issue with long option inside input-group

[ekctpemict]

I have a problem with selectpicker inside bootstrap input group. I have no idea how to fix it (

Also I compared the result with selectpicker alone and inputgroup without selectpicker (just select). Result bellow:

Here is my code:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12" style="width: 300px; border:1px dotted #f00;">
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">@</span>
                <select class="form-control">
                    <option>Very loooooooooooooooooooong option</option>
                    <option>Ketchup</option>
                    <option>Relish</option>
                </select>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12"
             style="width: 300px; border:1px dotted #f00; margin-top: 10px; margin-bottom: 10px;">
            <select class="selectpicker" data-width="100%">
                <option>Very loooooooooooooooooooong option</option>
                <option>Ketchup</option>
                <option>Relish</option>
            </select>
        </div>
    </div>
</div>


<div class="container-fluid">
    <div class="row">
        <div class="col-md-12" style="width: 300px; border:1px dotted #f00; ">
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">@</span>
                <select class="selectpicker form-control" data-width="100%">
                    <option>Very loooooooooooooooooooong option</option>
                    <option>Ketchup</option>
                    <option>Relish</option>
                </select>
            </div>
        </div>
    </div>
</div>

[Tsaukpaetra]

+1, I thought I was going nuts on this and eventually just slammed down a static width and hoping beyond all reason the users won't notice it. At least, it's less noticeable than breaking the layout (as much).

[jandayanan]

Currently facing the same problem with multiple options selected.

[jiteshvassa]

Did anyone figure out a work around for this issue?

[pickledgator]

This still seems to be an open issue. Has anyone found a work around aside from hardcoding a css width?

[bulabula001]

i am now facing the same problem, anyone could help me ?

[iyadthayyil]

Here is the fix, just add this to your css :

div.dropdown-menu.open { width: 100%; } ul.dropdown-menu.inner>li>a { white-space: initial; }

@silviomoreto Fixed.

[bulabula001]

tks@iyadthayyil

[silviomoreto]

@iyadthayyil do you have created a pull request for that?

[iyadthayyil]

@silviomoreto Done!

[silviomoreto]

#1853 done on

[caseyjhol]

This was addressed in v1.13.0-beta. I've moved development of this plugin to a new repo, and v1.13.0-beta can be downloaded here: https://github.com/snapappointments/bootstrap-select/releases/tag/v1.13.0-beta.

[rezequielp]

This fix was lost in commit cf673f1.
For Bootstrap 3 the issue persist.
1.13.0-beta and later version: commit referenced
the message refers to this issue but is not the same fix. Maybe that work for Bootstrap 4 but not for Bootstrap 3.

[caseyjhol]

@rezequielp I implemented a different fix than the one proposed in #1853. If you're still encountering the issue, please post an example, as it appears to be working properly: https://plnkr.co/edit/j0UyEMa7TvLZnzc8PqIP?p=preview.

[leonp5]

I still have the issue with v. 1.13.12 (package.json) (in the bootstrap-select.css it says, that is v. 1.13.18).

When i select a certain count of options the select box begin to grow and with every additional it grows more. Looks like this:

Thats the HTLM Structure (in a Twig template):

<div class="col-xl-6">
                            <div class="form-group">
                                <label>{{ "job.wizard.two.region" | trans }}</label>
                                <select
                                    class="form-control form-control-solid form-control-lg selectpicker"
                                    name="job_ad_visible_region[]"
                                    data-size="9"
                                    {# data-width="300px" #}
                                    multiple>
                                    {% for region in regions %}
                                        <option
                                            value="{{ region.getRegionId() }}"
                                            selected="selected">{{ region.getNameDe() }}</option>
                                    {% endfor %}
                                </select>
                                <span class="form-text text-muted">{{ "job.wizard.two.region.subtitle" | trans }}</span>
                            </div>

                        </div>

The only way to handle it is the data-width attribute. But with this, the select field isn't really responsive.

I'm not sure, if it is really fixed, because here #1853 is said, that the fix is lost.