How to get the kendo NumericalTextBox to share the width of a table cell the same way the kendo DropDownList does? - css

Question

I have a very simple form laid our in a table with one row and two cells. I have a kendo NumericalTextBox in one cell and a Text Input in the other. I have the table width set to 100% and no width on the cells.
The Problem:
The problem is that the NumericalTextBox takes up more that 50% width in it's cell, and squashes up the Text Input.
I have tested this with a kendo DropDownList and it works fine. It just takes 50%.
Why is the NumericalTextBox pushing out it's cell to more than 50% and how can I stop it doing this?
I realize I can put a style="width:50%" on the table cells, but this is an overhead on larger forms, as if you add a cell you have to go and update all your other cells width percentages etc...
Ideally I just want to be able to say the width of the table is 100% and the cells will equally share that, and each control in each cell will take up 100% of the cell width.
I put together a demo page that shows what is going on:
HTML:
<div id="testContainer">
<strong>Numerical TextBox and DropDownList</strong>
<table class="mistro-form">
<tr>
<td>
<label>Numerical TextBox:</label>
<input data-role="numerictextbox"
data-format="n0"
data-min="0"
data-decimals="0" />
</td>
<td>
<label>Drop Down List:</label>
<select name="Include Title"
data-role="dropdownlist"
data-value-primitive="true">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<table>
<div style="height:20px"></div>
<strong>Drop Down List and Text Input</strong>
<table class="mistro-form">
<tr>
<td>
<label>Drop Down List:</label>
<select name="Include Title"
data-role="dropdownlist"
data-value-primitive="true">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<label>Include Title:</label>
<input type="text" class="form-control" />
</td>
</tr>
<table>
</div>
CSS:
table.mistro-form {
width:100%;
}
.mistro-form td {
padding: 5px;
vertical-align: top !important;
}
.mistro-form .k-dropdown, .mistro-form .k-combobox, .mistro-form .k-numerictextbox, .mistro-form .k-textbox, .mistro-form .k-numerictextbox {
width: 100% !important;
}
JavaScript:
$(document).ready(function() {
kendo.init($('#testContainer'));
});
Here is a fiddle of the above code: http://jsfiddle.net/codeowl/UQdGQ/6/
Thank you for your time,
Regards,
Scott

Answer 1

Ok I just worked this out. I just needed to set the table-layout css property to fixed;
eg;
table.mistro-form {
width:100%;
table-layout:fixed;
}
Hope this can save someone else some time ;-)