Width of the combobox

[Rinck]

Hi,

I have a working combobox widget generated using the PHP wrappers. Now, I would like to make the widget wider (500px).

When I insert the javascript code below directly in to the page, I am able to widen the dropdownlist of the widget, however, not the widget itself.

var combobox = $("#event_id").data("kendoComboBox");
combobox.list.width(400);

I have also tried adding a custom class (which sets a width with an !important flag) to the widget using the .attr() method (from PHP); this does widen the widget, but it messes up the rendering and looks ugly afterwards.

How would I do this? I would like to make the default width of all widgets wider actually, all preferably from within my PHP code. Just to be clear, I would like to widen both the widget itself and the dropdownlist.

Hope you can help! :)

[Alexander Valchev]

Hi Rinck,

Combobox widget does not have a method or property which allows the developer to specify the width, which is why you cannot set it through the PHP wrappers. 

A much simpler solution would be to use a CSS rule:

<style scoped>
.k-widget.k-combobox {
    width: 400px;
}
</style>

In this way you would be able to widen all combo box widgets on the page and their drop down lists as well.
As an example:

<?php
$select = new \Kendo\UI\ComboBox('select');
$select->dataSource(array('X-Small', 'Small', 'Medium', 'Large', 'X-Large', '2X-Large'))
       ->placeholder('Select size ...')
       ->index(0);

echo $select->render();
?>

<style scoped>
.k-widget.k-combobox {
    width: 400px;
}
</style>

I hope this will help.

Kind regards,
Alexander Valchev
the Telerik team

[Rinck]

I knew I must have missed something, that was easy enough! :) Thanks for the quick reply!