CODEWITHSUNDEEP
htmlcsstwitter-bootstrapjquery-select2
SBB
SBB

Reputation: 8970

Legacy Bootstrap Styling Issue with Select2

I am using a legacy version of bootstrap (2.3.2) along side a plugin called Select2 which creates some fancy dropdowns. I am running into an issue when using it with Input Group Addons.

When trying to put an addon in front of the select that has been turned into the select2 dropdown, it is messing with the alignment/placement of the field.

It's very basic form code so I have to assume its the CSS of either bootstrap or select2 that's causing the issue:

Any thoughts on what CSS could be causing this problem? Input Group addons and forms are native so I'd say select2 is adding some CSS that has a padding or margin that's causing this.

<form class="form-horizontal" name="submitRequest" id="submitRequest" method="post" action="requestContentv2.php">
<div class="control-group">
    <label class="control-label"><small>Request Type</small>
    </label>
    <div class="controls">
        <div class="input-prepend"> <span class="add-on"><i class="icon-list-alt"></i></span>

            <select class="span5" id="e1">
                <option></option>
                <option value="Create New">Create New</option>
                <option value="Delete/Remove">Delete/Remove</option>
            </select>
        </div> <span class="help-block"><small>Select a request type from the list above.</small></span>

    </div>
</div>

enter image description here

Here is a fiddle of the example: http://jsfiddle.net/bs6b4fu7/1/

Upvotes: 1

Views: 1630

Answers (3)

Todd
Todd

Reputation: 5454

Playing around with the fiddle:

> small: enter image description here

responsive:

enter image description here

.input-prepend .select2-container .select2-choice {
    font-size:14px;
    line-height:20px;
    height:20px;
    padding-top:4px;
    padding-bottom:4px;
    border-radius: 0px 4px 4px 0px;
}
.input-prepend {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;    
}
.add-on {
    float: left;
}
[class*="span"].select2-container {
    width: 100%;
    margin-left: 0;
    float: none;
    min-width: 320px;

    @media (max-width: 767px) {
        /* responsive styles */
    }
}

Upvotes: 0

user3196599
user3196599

Reputation:

Is this what you are looking for?

.select2-container {
  margin:0;
}
.add-on{
    float:left;
}

Note - Do you want it to not collapse on smaller sizes?

Update - You will want to use this media query to override bootstrap's legacy media queries.

@media screen and (max-width: 767px) {
.span5 {
    width: 380px;
}
}

Upvotes: 3

Blackpool Towr
Blackpool Towr

Reputation: 393

How about removing the "span5" class? That worked for me...

<form class="form-horizontal" name="submitRequest" id="submitRequest" method="post" action="requestContentv2.php">
<div class="control-group">
    <label class="control-label"><small>Request Type</small>
    </label>
    <div class="controls">
        <div class="input-prepend"> <span class="add-on"><i class="icon-list-alt"></i></span>

            <select id="e1">
                <option></option>
                <option value="Create New">Create New</option>
                <option value="Delete/Remove">Delete/Remove</option>
            </select>
        </div> <span class="help-block"><small>Select a request type from the list above.</small></span>

    </div>
</div>

For the purpose of the Fiddle, I've also removed the first <option> tag https://jsfiddle.net/bs6b4fu7/3/

Upvotes: 1

Related Questions