kendo mobile listview RTL problem

3 posts, 1 answers
  1. Reda
    Reda avatar
    2 posts
    Member since:
    Mar 2016

    Posted 20 Mar Link to this post

    i have a problem when using kendo mobile listview widget in RTL scenario, the problem is when i tried to add for example "label" and "input text "in
    "li" they are added over each other like in the attached screenshot.

    the problem occurs only if i add "class=k-rtl" in the body tag, and it will fixed if i remove class=k-rtl but the page will shown as LTR.
    i put the code on telerik kendo DOJO and i get the same problem.

    remark:if a add label and input text outside the listview the appear normally.

    here is the my code:

    <!DOCTYPE html>

    <html>

    <head>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">

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

    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>

    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>

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

    </head>

    <body class="k-rtl">

    <div data-role="layout" data-id="default">
    <header data-role="header">
    <div data-role="navbar">
    </div>
    </header>

    <footer data-role="footer">
    <div data-role="tabstrip">
    <a href="#home" data-icon="home" data-transition="slide">Home</a>
    <a href="#search" data-icon="search" data-transition="slide">Search</a>
    <a href="#setting" data-transition="slide">Settings</a>
    </div>
    </footer>
    </div>


    <div data-role="view" id="home" data-title="Home">
    <div data-role="header">
    <div data-role="navbar">
    <span data-role="view-title"></span>
    </div>
    </div>

    <div>
    Welcome! This is the Home Page
    </div>
    </div>


    <div data-role="view" id="search" data-title="Search" >
    <div data-role="header">
    <div data-role="navbar">
    <span data-role="view-title"></span>
    </div>
    </div>

    <form>

    <ul data-role="listview" data-style="inset">

    <li>
    test label:::<input type="text" placeholder="test text"/>
    </li>

    <li>
    <label>Name:</label>
    <input type="text" placeholder="Name" />
    </li>

    <li>
    <label for="rbloodtype" >Blood Type:</label>
    <select name="rbloodtype" id="rbloodtype">
    <option value="A+">A+</option>
    <option value="A-">A-</option>
    <option value="B+">B+</option>
    <option value="B-">B-</option>
    <option value="AB+">AB+</option>
    <option value="AB-">AB-</option>
    <option value="O+">O+</option>
    <option value="O-">O-</option>
    </select>
    </li>

    </ul>
    </form>

    </div>

    <div data-role="view" id="setting" data-title="Settings">
    <div data-role="header">
    <div data-role="navbar">
    <span data-role="view-title"></span>
    </div>
    </div>
    <div>
    Setting View!
    </div>
    </div>

    <script>
    var app = new kendo.mobile.Application(document.body, {layout: "default", initial: "#home"});
    </script>

  2. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 23 Mar Link to this post

    Hi Reda,

    The kendo.rtl.min.css file doesn't target Kendo UI Mobile and, in general, there isn't RTL support in Kendo UI Mobile (Hybrid UI). It would be best to remove the kendo.rtl.css file and implement the RTL layout yourself. 

    You can also vote for the feature request in the Kendo UI Feedback portal and track its status to see if support is added in the future:
    RTL support for Mobile widgets

    Regards,
    Tsvetina
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  3. Reda
    Reda avatar
    2 posts
    Member since:
    Mar 2016

    Posted 24 Mar in reply to Tsvetina Link to this post

    okk thanks, i'll do that.

    hope to see RTL kendo mobile support in the future

    best regards.

     

Back to Top