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 26 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Orlando
Top achievements
Rank 1
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>
    <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>
    </div>
</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

Sort by
0
Accepted
Kiril Nikolov
Telerik team
answered on 28 Feb 2014, 08:12 AM
Hello Orlando,

You can set position relative of the input element so it will be positioned to the left. Please check the updated example:

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

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Orlando
Top achievements
Rank 1
answered on 28 Feb 2014, 11:06 AM
Thanks!
0
Kiril Nikolov
Telerik team
answered on 28 Feb 2014, 11:51 AM
Hi Orlando,

I am glad it helped!

In case you have any further questions please do not hesitate to contact us.

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Orlando
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Orlando
Top achievements
Rank 1
Share this question
or