This is a migrated thread and some comments may be shown as answers.

Wrong width in autocomplete

3 Answers 284 Views

AutoComplete

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

OnaBai asked on 18 Nov 2012, 01:04 AM

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

3 Answers, 1 is accepted

answered on 19 Nov 2012, 11:56 AM

jsp1.png

html1.png

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>

<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>

<link href="styles/kendo.silver.min.css" rel="stylesheet" type="text/css"/>

<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>

<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>

<link href="styles/kendo.silver.min.css" rel="stylesheet" type="text/css"/>

<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

Accepted

answered on 20 Nov 2012, 11:07 AM

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!