CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Ionut
Ionut

Reputation: 1749

Display span on top of select inside input-group

Is there any way that inside a input-group the span to be on top and not on the left ?

I would like it to be like this :

Title
line_1
line_2
line_3

I have tried wrapping the span with a div.input-group but the span and the select are not together anymore, they are separated.

Here is the html code :

<div class="input-group">
    <span class="input-group-addon">Title</span>
    <select class="form-control" multiple="multiple" size="3">
        <option value="line_1">line_1</option>
        <option value="line_1">line_2</option>
        <option value="line_1">line_3</option>
    </select>
</div>

Here is a JSFiddle example

Upvotes: 0

Views: 712

Answers (2)

BReal14
BReal14

Reputation: 1584

The bootstrap input-group-addon class is positioning the element in that location. If you don't want the default bootstrap behavior, you either need to over-ride it (usually with !important as part of the css declaration) or remove the bootstrap class from the element.

Removing the class and setting to block: http://jsfiddle.net/c60h2z0v/1/

Upvotes: 1

Mikkel Damm
Mikkel Damm

Reputation: 341

The span is an inline element like text, input, select etc. Therefor its added besides the select. If you want the span to be on top of the select, then you either needs to:

  1. Wrap only the span with a div
  2. Make the span a div
  3. Make the span display:block;

Upvotes: 1

Related Questions