CODEWITHSUNDEEP
twitter-bootstrap
Pascal Luxain
Pascal Luxain

Reputation: 281

Combining input-append input-prepend add-on and spanX classes

I am working on a small project and decided to use Twitter Bootstrap as I am not very good at design !

Well I am facing a problem with the input-append and input-prepend elements when I try to combine them with .spanX classes to have them the same size.

Currently here is the problem

When I do this : 

<div class="row-fluid">
    <div class="span12 input-append input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <span class="span8 uneditable-input text-right">0</span>
        <span class="add-on">
            <i class="icon-tint"></i>
        </span>
    </div>
</div>

everything is fine

If I add a spanX to the prepended element it works perfectly.

<div class="row-fluid">
    <div class="span12 input-append input-prepend">
        <span class="span2 add-on">
            <i class="icon-user"></i>
        </span>
        <span class="span8 uneditable-input text-right">0</span>
        <span class="add-on">
            <i class="icon-tint"></i>
        </span>
    </div>
</div>

But then, if I try to put a spanX element to the appended element it doesn't work anymore and the layout is broken

<div class="row-fluid">
    <div class="span12 input-append input-prepend">
        <span class="span2 add-on">
            <i class="icon-user"></i>
        </span>
        <span class="span8 uneditable-input text-right">0</span>
        <span class="span2 add-on">
            <i class="icon-tint"></i>
        </span>
    </div>
</div>

So does anyone already had the same issue ? I looked in the site but didn't find anything relevant to this problem.

I know sometimes the fact that span elements are not inline in the code are causing problems but I didn't experience that and even if everything is inline the problem persists.

Thanks for reading. Any help or advice welcome =)

Upvotes: 0

Views: 2945

Answers (1)

dusthaines
dusthaines

Reputation: 1350

All span* classes come with a float:left; declaration - that is what is causing your problem. You might be better to create a class and define the width as you'd like. Then you will not get the troublesome float that comes with using a span class.

Your example updated here:

http://jsfiddle.net/dusthaines/77XEk/3/

Upvotes: 2

Related Questions