show 3 drop down lists side by side?

2 posts, 1 answers
  1. Peter
    Peter avatar
    15 posts
    Member since:
    May 2014

    Posted 29 Jun 2019 Link to this post

    hello,

    I have 3    @(Html.Kendo().DropDownList()  

    is there a telerik control i can use to arrange them  side by side?

    Attached picture shows current placement, this is my cshtml 
        <div class="demo-section" style="width: 250px;">
     
                        <h4>Status</h4>
                        @(Html.Kendo().DropDownList()   etc etc

    thanks,Peter

  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    5934 posts

    Posted 01 Jul 2019 Link to this post

    Hello Peter,

    You must ensure that the page CSS does not make the dropdowns, their siblings, or their containers block elements. For example, the <h4> elements are block elements, so they will break the lines.Thus, you must remove those headings or make them use inline display.

    For example, this snippet will result in "result-1.png" attached below:

    @(Html.Kendo().DropDownList().Name("first"))
    @(Html.Kendo().DropDownList().Name("second"))
    @(Html.Kendo().DropDownList().Name("third"))

    and this one will break into two lines because of the heading ("result-2.png"):

    @(Html.Kendo().DropDownList().Name("first"))
    <h4>some heading</h4>
    @(Html.Kendo().DropDownList().Name("second"))
    @(Html.Kendo().DropDownList().Name("third"))


    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top