CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Marty131
Marty131

Reputation: 345

HTML table cell contents are wrapping when using Bootstrap CSS

Within a HTML table cell, I have a text input element, followed by some standard text. I want both items to be inline.

This works fine until I import bootstrap.css, at which point the items are shown on separate lines, as if a line break exists between them.

I am unsure on how to "override" whatever styling bootstrap is applying.

Please see my JS Fiddle below. I have included the bootstrap.min.css resource.

You can see that the text input field and string "m" are on separate lines within each cell.

Once you remove the Bootstrap.css external resource, and press run again, the items are inline.

How can I override whatever styling the Bootstrap CSS is applying? (I need Bootstrap CSS for other things).

Thanks

https://jsfiddle.net/87tdupys/9/

<!--Desired: text input field plus text "m" inline. However, Bootstrap.min.css is causing the 2 items to display on separate lines. This can be shown by removing the external reference to bootstrap.min.css (in the left hand External Resources pane). How can I override this behaviour, and force the 2 items to be inline?-->

<table id='assetConfigLayoutTable' border='1px'>

  <tr>
    <td>
      <label>Capacity A</label>
    </td>
    <td style="width:200px">
      <input type="text" class="form-control" style="width:50px;"> m
    </td>

    <td>
      <label>Capacity B</label>
    </td>
    <td style="width:200px">
      <input type="text" class="form-control" style="width:50px"> m
    </td>
  </tr>

</table>

Upvotes: 2

Views: 429

Answers (4)

shiva krishna
shiva krishna

Reputation: 222

just take a new class name beside the form-control and put the below code in 
your css
<style>
 .text-display
  {
    display: inline-block !important;
  }
</style>
<table id='assetConfigLayoutTable' border='1px'>

<tr>
  <td>
    <label>Capacity A</label>
  </td>
  <td style="width:200px">
    <input type="text" class="form-control text-display" 
   style="width:50px;"> m
  </td>

  <td>
    <label>Capacity B</label>
  </td>
  <td style="width:200px">
    <input type="text" class="form-control text-display" style="width:50px"> 
    m
  </td>
 </tr>

</table>

Upvotes: 1

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

In twitter-bootstrap by default .form-control is block level element, you need to make it inline-block element.

.form-control{
  display:inline-block;
}

fiddle

Upvotes: 3

Expressingx
Expressingx

Reputation: 1572

Or put a div with class form-inline in the td

https://jsfiddle.net/87tdupys/7/

Upvotes: 1

user6132631
user6132631

Reputation:

just place a important !important in your custom css ,

Hope it works for you

and there was no fiddle link.....

Upvotes: 0

Related Questions