CODEWITHSUNDEEP
csstwitter-bootstrap
alias51
alias51

Reputation: 8608

How to style an inline form

I am trying to create a simple label and select box for a form.

I want this: [LABEL] [SELECT BOX]. Inline. All on the same line. Simple, eh?

Yet when I use the inline form element from bootstrap, it wraps the box:

<form class="form-inline" role="form">
    <label for="sort-values">Sort:
        <select id="sort-values" class="form-control">
            <option value="2">Distance</option>
            <option value="3">Rating</option>
            <option value="4">Price</option>
        </select>
    </label>
</form>

What am I missing? Example here: http://bootply.com/79458

Upvotes: 2

Views: 733

Answers (2)

doktorgradus
doktorgradus

Reputation: 627

You can use two methods for linking label and select. First method: id for select and attribute for for label. Second: including select inside of label. Not necessary use both of them.

Code:

<form class="form-inline" role="form">
    <label class="control-label" for="sort-values">Sort:</label>
    <select id="sort-values" class="form-control">
        <option value="2">Distance</option>
        <option value="3">Rating</option>
        <option value="4">Price</option>
    </select>
</form>

Example: http://bootply.com/79462

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240938

The width of the element .form-control is the problem..

.form-control {
    width: 100%;
}

It is currently at 100%.. if you want it to work, you can either remove the width completely.. or just specify a smaller width, such as 200px;

Forked example here

Upvotes: 1

Related Questions