Wrong width in autocomplete

4 posts, 1 answers
  1. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 17 Nov 2012 Link to this post

    The span generated around autocomplete inputs, includes an extra style="width: 100%" which makes the render different for JSP wrapper than for HTML.

    This is the HTML generated for JSP
    <span tabindex="-1" role="presentation" style="width: 100%;" class="k-widget k-autocomplete k-header k-state-default k-input">
    <input id="beer" name="beer" data-role="autocomplete" placeholder="beer name" style="width: 100%;" type="text" class="k-input" autocomplete="off" role="textbox" aria-haspopup="true" aria-disabled="false" aria-owns="beer_listbox" aria-autocomplete="both">
    </span>
    and this for traditional HTML/JavaScript:
    <span tabindex="-1" role="presentation" style="" class="k-widget k-autocomplete k-header k-state-default">
    <input id="beer" data-role="autocomplete" placeholder="beer name" style="width: 100%;" type="text" class="k-input" autocomplete="off" role="textbox" aria-haspopup="true" aria-disabled="false" aria-owns="beer_listbox" aria-autocomplete="both">
    </span>
    Where we can see that for JSP wrapper the span includes the extra value in style attribute
  2.
  3. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 19 Nov 2012 Link to this post

    Hello Emiliano,

    By default Kendo AutoComplete widget will copy styles and css classes of the input element to the wrapper. This functionality is not related to the JSP wrappers of Kendo UI. If you want to overcome this, you can apply custom styles after the widget is initialized.


    Regards,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 19 Nov 2012 Link to this post

    Hello Georgi,

    Let me rephrase it: I have code written using KendoUI Web (which means HTML5 + JavaScript) and with the new JSP tag library I'm planning to move to it BUT I'd like to rewrite as little as possible.

    I had:
    <html>
    <head>
        <title>Powered by Zafu: OnaBai 2012 (c)</title>
        <!-- Kendo UI Web styles-->
        <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
        <link href="styles/kendo.silver.min.css" rel="stylesheet" type="text/css"/>
     
        <!-- Kendo UI Web scripts-->
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="kendo.web.js" type="text/javascript"></script>
     
        <style type="text/css">
            html {
                font-family: "Arial", sans-serif;
                font-weight: 300;
                font-variant: normal;
                font-style: normal;
                font-size: 12px;
            }
        </style>
     
        <script type="text/javascript">
            $(document).ready(function () {
                $("#main").kendoWindow({
                    title:    "Powered by Zafu: OnaBai 2012 (c)",
                    minHeight:200,
                    minWidth: 400,
                    maxWidth: 400
                });
     
                $("#beer").kendoAutoComplete({
                    dataTextField: "name",
                    dataSource:    {
                        pageSize:       10,
                        serverFiltering:true,
                        transport:      {
                            read:{
                                url: "/ListBeer",
                                type:"GET"
                            }
                        }
                    }
     
                })
            });
        </script>
    </head>
    <body>
    <div id="main">
        <input id="beer"/>
     
        <div style="position: absolute; bottom: 5px;">Powered by Zafu, Couchbase 2.0 & KendoUI</div>
    </div>
    </body>
    </html>
    That is rendered as shown in "html1.png".

    Now, I write:
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags" %>
    <html>
    <head>
        <title>Powered by Zafu: OnaBai 2012 (c)</title>
        <!-- Kendo UI Web styles-->
        <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
        <link href="styles/kendo.silver.min.css" rel="stylesheet" type="text/css"/>
     
        <!-- Kendo UI Web scripts-->
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="kendo.web.js" type="text/javascript"></script>
     
        <style type="text/css">
            html {
                font-family: "Arial", sans-serif;
                font-weight: 300;
                font-variant: normal;
                font-style: normal;
                font-size: 12px;
            }
        </style>
    </head>
    <body>
    <kendo:window name="main" title="Powered by Zafu: OnaBai 2012 (c)" minHeight="200" minWidth="400" maxWidth="400">
        <kendo:autoComplete name="beer" dataTextField="name">
            <kendo:dataSource pageSize="10" serverFiltering="true">
                <kendo:dataSource-transport>
                    <kendo:dataSource-transport-read url="/ListBeer" type="GET"/>
                </kendo:dataSource-transport>
            </kendo:dataSource>
        </kendo:autoComplete>
        <div style="position: absolute; bottom: 5px;">Powered by Zafu, Couchbase 2.0 & KendoUI</div>
    </kendo:window>
    </body>
    </html>
    That gets rendered as jsp1.png

    Do you see the difference? What is wrong for getting different renders? Is this what is expected (not 100% compatible KendoUI Web and JSP wrapper?)

    Best regards
  7. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 20 Nov 2012 Link to this post

    Hello again Emiliano,

     
    Thank you for the clarification. Indeed the problem is related to the server wrappers. As you probably know widgets rendered by the server wrappers are self-initialized. Hence when the window is initialized it moves its content to the end of the body. When the script tag, which includes the initialization of the autocomplete, will be evaluated again. For now you can overcome this issue with removing the applied width style of the autocomplete. We decided to improve current behavior and that is why we will skip the script tags when the window is initialized. The fix will be available in the next internal build (available only for paid customers). I updated your Telerik points because of the involvement.

    Kind regards,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top