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
and this for traditional HTML/JavaScript:
Where we can see that for JSP wrapper the span includes the extra value in style attribute
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><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>3 Answers, 1 is accepted
0
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
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!
0
OnaBai
Top achievements
Rank 2
Rank 2
answered on 19 Nov 2012, 11:56 AM
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:
That is rendered as shown in "html1.png".
Now, I write:
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
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>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>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
0
Accepted
Hello again Emiliano,
Georgi Krustev
the Telerik team
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.
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!