Edgar Navasardyan Edgar Navasardyan - 5 months ago 20
CSS Question

Making input fit td height and width

I have included all the popular recommendations in stackoverflow how to do this, but still my input has a bit lower height than the cell. Looks like the key css options are

display:table-cell;
and
width:100%;


MOST IMPORTANT - if I remove table table-condensed, it's ok. But the question is, how to preserve input height with table-condensed !

JS Fiddle



td.zeon_input_table_cell input
{
display:table-cell;
width:100%;
background-color: transparent
}

td
{
border:solid
}

<table id="formset" class="form table table-condensed zeon zeon-row-hover">
<thead>
<th>Column 1</th><th>Column 2</th>
</thead>
<tbody>
<tr class="row1">
<td class="zeon_input_table_cell">
<input id="id_form-0-id" name="form-0-id" type="hidden" value="1">
</td>

<td class="zeon_input_table_cell">
<input id="id_form-0-min_delivery_value" name="form-0-min_delivery_value" step="any" type="number" value="5000.0">
</td>
</tr>




Answer

Just add box-sizing: border-box; to td.zeon_input_table_cell input Refer to the following link for some more information about box-sizing: https://css-tricks.com/box-sizing/

To remove the padding caused by bootstrap just add padding: 0 !important; to td like below: (ref https://css-tricks.com/when-using-important-is-the-right-choice/)

JSFiddle: https://jsfiddle.net/brqyfmoh/2/

td.zeon_input_table_cell input
{
	display:table-cell; 
	width:100%; 
	background-color: transparent;
   box-sizing: border-box;
}

td
{
  border:solid;
}
.no-padding {
  padding: 0 !important; /* Edit 2 */
}
<table id="formset" class="form table table-condensed zeon zeon-row-hover">
  <thead>
      <th>Column 1</th><th>Column 2</th>
  </thead>
  <tbody>
    <tr class="row1">
      <td class="zeon_input_table_cell no-padding">
        <input id="id_form-0-id" name="form-0-id" type="hidden" value="1">
      </td>

      <td class="zeon_input_table_cell no-padding">
        <input id="id_form-0-min_delivery_value" name="form-0-min_delivery_value" step="any" type="number" value="5000.0">
      </td>
    </tr>

Comments