CODEWITHSUNDEEP
csstwitter-bootstrap-3
Axil
Axil

Reputation: 3311

bootstrap input form-control display horizontally than cascading

I have trouble with input bootstrap form-control in a table column. I dont want it to be cascading ontop of each other but i want it stacked horizontally like how tables rows should be.

Here is the problem code:

        <td colspan="4">
         a:
         <input class="form-control" id="a" type="text" value="a" />                
         b:
         <input class="form-control" id="a" type="text" value="a" />                  
        </td>

And here is the example to see the problem.

http://jsfiddle.net/gV6y8/27/

Upvotes: 0

Views: 594

Answers (1)

Dan
Dan

Reputation: 9488

You have a few issues in your code, you should wrap inputs in the form-group class, also form-control automatically takes 100% width. Furthermore, it sounds like you want to be using a form-inline.

Try this:

HTML:

First change: add form-inline class

<table id="paymenttable" class="table table-condensed form-inline">

Second change: add form-group and change width of form-control

<td colspan="4">
    <div class="form-group">
        a:
        <input class="form-control table-input" id="a" type="text" value="a" />        
        b:
        <input class="form-control table-input" id="a" type="text" value="a" />                 
    </div>
</td>

Add to your CSS:

.table-input {
    width:40%;
}

Updated fiddle

Upvotes: 1

Related Questions