This is a migrated thread and some comments may be shown as answers.

Width of the combobox

2 Answers 310 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Rinck
Top achievements
Rank 1
Rinck asked on 03 Apr 2013, 01:08 PM
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! :)

2 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 03 Apr 2013, 02:26 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Rinck
Top achievements
Rank 1
answered on 03 Apr 2013, 03:34 PM
I knew I must have missed something, that was easy enough! :) Thanks for the quick reply!
Tags
ComboBox
Asked by
Rinck
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Rinck
Top achievements
Rank 1
Share this question
or