CODEWITHSUNDEEP
csslayouttwitter-bootstrap
PilotBob
PilotBob

Reputation: 3117

Why does input-append class break the width of the input in fluid grids?

I have the following html:

<div class="container-fluid">
<div class="row-fluid">
    <div class="span8">
        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label">Field 1</label>
            <div class="controls">
                <input type="text" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Field 2</label>
            <div class="controls">
                <div class="input-append">
                <input type="text" />
                    <span class="add-on">%</span>
                </div>
                </div>
            </div>
        </form>
    </div>
</div>

​

And the following style:

input { width: 100%; }​

Field 1's input box works as expected. However, field 2 seems to get some fixed width. Why does this happen and is there a way to fix it? I would like the appended to input to be the same 100% width within the span to match the other text fields.

Example here: http://jsfiddle.net/PilotBob/erT7d/

Upvotes: 1

Views: 1013

Answers (3)

fkabeer
fkabeer

Reputation: 398

I have saved this file and run it. No issues found

<style>
input{width: 100%;}
</style>
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
    <form class="form-horizontal">
        <div class="control-group">
            <label class="control-label">Field 1</label>
        <div class="controls">
            <input type="text" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">Field 2</label>
        <div class="controls">
            <div class="input-append">
            <input type="text" />
                <span class="add-on">%</span>
            </div>
            </div>
        </div>
    </form>
    </div>
</div>

But on your mentioned url it is not working i don't know why? If somewhere else it is creating problems there may be some reasons

  1. insufficient container width, omit the parent or container width will solve the problem
  2. you may have overwrite the width later in the css, use "input { width: 100% !importtant;}"

Upvotes: 0

Sotiris
Sotiris

Reputation: 40086

This happens because bootstrap changes the default display value of the div which has the class input-append from block to inline-block.

You can set the width:100% to have the input the same width as normal but the add-on will overflow or set it to width:95% to be the same.

First solution with width:100%

Second solution with width:95%

Upvotes: 1

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175017

That's because on the second input, you have another container, .input-append, which is smaller than you think.

Setting it to width:100%; as well, solved this problem.

Upvotes: 1

Related Questions