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 Answers, 1 is accepted
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.
Rank 1
okk thanks, i'll do that.
hope to see RTL kendo mobile support in the future
best regards.