How can I change the width of kendo ui bobox? I use version: 2012.3.1114 I've tried:

#options {
    padding: 30px;
}
#options h3 {
    font-size: 1em;
    font-weight: bold;
    margin: 25px 0 8px 0;
}
.k-bobox{
    width:60px;  }

Javascript: $("#select").kendoComboBox();

Html:

<select id="select">
    <option value="null">nada</option>
    <option value="true">ON</option>
    <option value="false">OFF</option>
</select>

With a file it works but not in jsfiddle: example

How can I change the width of kendo ui bobox? I use version: 2012.3.1114 I've tried:

#options {
    padding: 30px;
}
#options h3 {
    font-size: 1em;
    font-weight: bold;
    margin: 25px 0 8px 0;
}
.k-bobox{
    width:60px;  }

Javascript: $("#select").kendoComboBox();

Html:

<select id="select">
    <option value="null">nada</option>
    <option value="true">ON</option>
    <option value="false">OFF</option>
</select>

With a file it works but not in jsfiddle: example

• javascript
• jquery
• html
• css
• kendo-ui

3 Answers 3

Try This :

$(document).ready(function() {

                $("#select").kendoComboBox();
                $("#select").parent().css('width',"300px");

            });

You can also do it like this :

$(document).ready(function() {
            $("#select").width(400).kendoComboBox();
                });

You can use an !important css declaration:

.k-bobox{
   width: 125px !important;
}

other useful way: .HtmlAttributes(new { style = "width: 200px;"}) via https://stackoverflow./a/25725406/1923256