Inline multiselect?

5 posts, 0 answers
  1. Kyle
    Kyle avatar
    16 posts
    Member since:
    Apr 2012

    Posted 02 Apr 2013 Link to this post

    Currently the multiselect widget gets wrapped in a div, causing it to move to a newline. Other similar widgets like the dropdownlist do not. Is there a way I can make the multiselect widget not move to a newline?

    I tried setting the display to be 'inline-block', but then it shifted the multiselect to be 'hovering' above the available data.

    http://imgur.com/GiQURfS
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 04 Apr 2013 Link to this post

    Hello Kyle,

    I have already answered to your support ticket with the same question, however I am pasting my reply here too so the other users who follow this thread can read it: 

    From the provided picture I presume you would like to align Kendo UI DropDownList, AutoComplete and Multiselect widgets on the same line? If this is the case you can set the following CSS to the .k-widget.k-multiselect element

    Copy Code
    <style scoped>
    .k-widget.k-multiselect{
        width400px;
        vertical-alignmiddle;
        display: inline-block;
    }
    </style>
    For your convenience I prepared a simple jsBin example which demonstrates the suggested approach in action. Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Sunil
    Sunil avatar
    2 posts
    Member since:
    Jan 2017

    Posted 26 Oct in reply to Iliana Nikolova Link to this post

    thanks it works for me.
  4. Sunil
    Sunil avatar
    2 posts
    Member since:
    Jan 2017

    Posted 26 Oct Link to this post

    but it is not working in mozilla and chrome. And in IE also faced some issue.
  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1301 posts

    Posted 30 Oct Link to this post

    Hi Sunil,

    I checked how the MultiSelect from the example Iliana has linked looks like in Chrome, Firefox and IE11 and in all of them it is displayed in the same line as the DropDownList and AutoComplete, but depending on your resolution you might need to resize jsbin's Output pane, otherwise it could be too narrow to fit all three widgets on the same line (see this screencast).

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top