How to add multiple drop-down selection options side-by-side

I have implemented 2 select tags with values but when i executed they are not showing side by side as shown in the result below.

But i want to implement those select tags side by side like should i use margin-top:20px; or any other way to do this

<!doctype html>

    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>

    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>

        <div id="example" role="application">
            <div id="select" class="demo-section k-content">

            <h4 style="margin-top: 2em;">select</h4>
            <select id="size" placeholder="Select size..." style="width: 300px;" >
              <option />easy
              <option />to
              <option />code
              <option />way
              <option />always
              <option />easily
            </select>

        </div>

<div id="example1" role="application">
            <div id="select" class="demo-section k-content">

            <h4 style="margin-top: 2em;">select</h4>
            <select id="size1" placeholder="Select size..." style="width: 300px;" >
              <option />C++
              <option />java
              <option />jquery
              <option />html
              <option />css
              <option />unix
            </select>

        </div>

            <script>
                $(document).ready(function() {
                    // create ComboBox from input HTML element

                    // create ComboBox from select HTML element
                    $("#size").kendoComboBox();
 $("#size1").kendoComboBox();

                    var select = $("#size").data("kendoComboBox");
var select = $("#size1").data("kendoComboBox");

                });
            </script>
        </div>

</!doctype>

first, you need to wrap the div id="select" inside the example div. ( you were missing </div> closing tag of the example div )

then add style to the example divs

 <div id="example" role="application" style="float:left;width:49%; margin-right:2%">
 <div id="example1" role="application" style="float:left;width:49%;margin-right:0">

this way they will always stay side by side

see code snippet bellow. let me know if it helps

INFO : it's never a good idea to use duplicate ids in HTML , for example <div id="select"> , and always recheck your html code ( closing tags, id-s etc. )

<!doctype html>

    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>

    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>

        <div id="example" role="application" style="float:left;width:49%; margin-right:2%">
            <div id="select" class="demo-section k-content">

            <h4 style="margin-top: 2em;">select</h4>
            <select id="size" placeholder="Select size..." style="width: 300px;" >
              <option />easy
              <option />to
              <option />code
              <option />way
              <option />always
              <option />easily
            </select>

        </div>
</div>

<div id="example1" role="application" style="float:left;width:49%;margin-right:0">
            <div id="select" class="demo-section k-content">

            <h4 style="margin-top: 2em;">select</h4>
            <select id="size1" placeholder="Select size..." style="width: 300px;" >
              <option />C++
              <option />java
              <option />jquery
              <option />html
              <option />css
              <option />unix
            </select>

        </div>
 </div>

            <script>
                $(document).ready(function() {
                    // create ComboBox from input HTML element

                    // create ComboBox from select HTML element
                    $("#size").kendoComboBox();
 $("#size1").kendoComboBox();

                    var select = $("#size").data("kendoComboBox");
var select = $("#size1").data("kendoComboBox");

                });
            </script>

</!doctype>

Related Articles