Weird behaviour on Autocomplete with (left-)padding-left

2 posts, 0 answers
  1. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 08 Nov 2015 Link to this post

    Its ok the Telerik widgets come also with its own CSS styles. I have the requirement to add a left-padding on a autocomplete widget but doing so the widget shows weird displaced items on screen. I have prepared a simple example you can try right away:

    It does the padding as you can see when clicking on the input textbox. But there is a grey area in the background that looks displaced. Any reasons why and how I can fix it?

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Kendo UI Snippet</title>

        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.dataviz.min.css">
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.dataviz.default.min.css">
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
    </head>
    <body>
      
    <div id="autocompletediv">
    <input id="autocomplete" name="autocomplete" class="b_shadowrightdown" style="padding-left:20px;">
    </div>

    <script>
    $("#autocomplete").kendoAutoComplete({
      dataSource: {
        data: ["One", "Two"]
      }
    });

    </script>
    </body>
    </html>

     

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 10 Nov 2015 Link to this post

    Hi,

    I replied to the same question in your other thread, however here is my answer too: 

    When initialized Kendo UI AutoComplete widget is wrapped in a <span> element (inspect the rendered HTML). Take a look at this dojo which demonstrates a possible implementation of the desired outcome. 

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top