Twitter Bootstrap column definition is not properly applied to Kendo DropDown
kendo-dropdown, kendo-ui, twitter-bootstrap
Solution
The problem is the `k-dropdown` has a fixed `width` of `12.4em`, thus the `col-sm-10` is not able to give it the width it should, simply overwrite that CSS with:
.k-dropdown{
width: 100%;
}
That should make the dropdown fill according to the width of its parent container.
Updated fiddle
Problem
I have created a fiddle where you can see that the size of the Kendo DropDown is not set as expected. How I have to modify the code to get the expected behaviour? regards HTML Code: ``` <form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email" /> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password" /> </div> </div> <div class="form-group"> <label for="dropdown" class="col-sm-2 control-label">DropDown</label> <div class="col-sm-10"> <select id="dropdown"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> <option>Option 6</option> <option>Option 7</option> </select> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"/> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> ``` Javascript: ``` $(document).ready(function() { $("#dropdown").kendoDropDownList(); }); ``` http://jsfiddle.net/mkeuschn/e58X8/