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

I can't place input text to left inside a listview

3 Answers 130 Views

General Discussions

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

Orlando asked on 28 Feb 2014, 03:46 AM

Hi...

I need to place an input text/search field to left and button to right inside a listview. Button is ok, but i can't place the input text/search to left.

please advise me...

Here is my example:

http://jsbin.com/toxuyate/1/edit

<!DOCTYPE html>

<html>

<head>

<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.all.min.js"></script>

<meta charset=utf-8 />

<title>JS Bin</title>

</head>

<body>

<div data-role="view" data-use-native-scrolling="true" id="search_products" data-title="Catalog" data-layout="mobile-tabstrip">

<ul data-role="listview" data-type="group">

<li>

Search

<ul>

<li><input id="txtSearch" autocomplete = "on" autofocus = "autofocus" type="search" value="123192831029831028931092831092831092381092831023" />

<a style="float:right" data-role="button" class="km-button" data-align="right" data-icon="search" onclick="searchProductName(document.getElementById('txtSearch').value);"></a>

</li>

</ul>

<ul id="listview" class="inboxList"></ul>

</li>

</ul>

</div>

<div data-role="layout" data-id="mobile-tabstrip">

<header data-role="header">

<div data-role="navbar">

<a data-align="left" data-role="backbutton" class="nav-button">Catalog</a>

<span data-role="view-title"></span>

</div>

</header>

<div data-role="footer">

<div data-role="tabstrip" id="myTabStrip">

<a href="#tabstrip-home" data-icon="recents">Catalog</a>

</div>

<script>

var app = new kendo.mobile.Application($(document.body), {

platform: "ios",

transition: "slide",

hideAddressBar: true,

serverNavigation: false,

loading: ""

});

</script>

</body>

</html>

3 Answers, 1 is accepted

Accepted