Width of the combobox

3 posts, 1 answers
  1. Rinck
    Rinck avatar
    23 posts
    Member since:
    Feb 2013

    Posted 03 Apr 2013 Link to this post

    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. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 03 Apr 2013 Link to this post

    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!
  3. UI for ASP.NET AJAX banner
  4. Rinck
    Rinck avatar
    23 posts
    Member since:
    Feb 2013

    Posted 03 Apr 2013 Link to this post

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