Incorrect Rendering

1 posts, 0 answers
  1. Orren
    Orren avatar
    1 posts
    Member since:
    Apr 2012

    Posted 27 Jun 2012 Link to this post

    Hi,

    I am new html development as well as Kendo. I've written the below HTML and the input is not rendering properly. The input box is in a different place than the Autocomplete. What is the right way to do this with absolute positioning...OR is there some other recommended way to do this.

    Thanks!

    <!DOCTYPE html>
    <html>
      <head>
        <title></title>
        <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
        <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="js/kendo.web.min.js" type="text/javascript"></script>
      </head>
      <body>
        <div id="example" class="k-content">
            <input id="EDIT1" class="EDITCSS" /> <br />
            <select id="select" placeholder="Select size...">
                    <option>X-Small</option>
                    <option>Small</option>
                    <option>Medium</option>
                    <option>Large</option>
                    <option>X-Large</option>
                    <option>2X-Large</option>
                </select>
        </div>
        <style>
            .EDITCSS {
                position: absolute;
                left: 376px;
                top: 112px;
            }
        </style>
        <div>
            <script>
                $(document).ready(function() {
                    $("#EDIT1").kendoAutoComplete(["Apples", "Oranges", "Grapes"]);
                    $("#select").kendoComboBox();
                })
            </script>
        </div>
      </body>
    </html>
Back to Top