CODEWITHSUNDEEP
twitter-bootstrap
user1532573
user1532573

Reputation: 81

Bootstrap horizontal form input and selects don't right align

The right hand sides of selects and inputs are not aligning in my bootstrap horizontal form. Based on my debugging, it looks like the inputs are overshooting the boundaries of the parent div, while the selects are well behaved and respect the boundary. How do I "convince" the inputs to align with the selects

Here is my fiddle: http://jsfiddle.net/bjFXe/6/

CSS

input, select {
width: 100%;
overflow: hidden;
}

HTML

<form class="form-horizontal">
<div class="accordion row-fluid" id="accordion">
    <div class="accordion-group">
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" href="#main">
                Main
            </a>

            <div id="main" class="accordion-body collapse in">
                <div class="accordion-inner">
                    <fieldset>
                        <div class="row-fluid">
                            <div class="span6">
                                <div class="control-group warning">
                                    <label class="control-label" for="test1">test1</label>
                                    <div class="controls">
                                        <select id="test1">
                                            <option>option 1</option>
                                            <option>option 2</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="test2">Test2</label>
                                    <div class="controls">
                                        <input type="text" placeholder="Test2" id="test2">
                                    </div>
                                </div>
                            </div>
                            <div class="span6">
                                <div class="control-group">
                                    <label class="control-label" for="test3">test3</label>
                                    <div class="controls">
                                        <input type="text" id="test3">
                                    </div>
                                </div>
                                <div class="control-group warning">
                                    <label class="control-label" for="test4">test4</label>
                                    <div class="controls">
                                        <select id="test4">
                                            <option>option 1</option>
                                            <option>option 2</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 1683

Answers (2)

Kami
Kami

Reputation: 19437

The simplest solution is to use the input-block-level class on the input fields. This will convert the inputs to block level, and as such they will take up all available space.

<input type="text" placeholder="Test2" id="test2" class="input-block-level"/>

This class is part of the bootstrap framework, so you are not adding additional custom css.

Upvotes: 1

tr33hous
tr33hous

Reputation: 1642

I don't exactly know why this is happening. Looks like a padding/margin issue. However, setting absolute values works:

input, select {
    width: 12;
    overflow: hidden;
}

Upvotes: 0

Related Questions