Question

http://dojo.telerik.com/AfeNi/8幸运地提供了这个道场David Shorthose，用于在Kendo UI小部件中切换RTL和LTR方向。

它在Firefox上没有问题。在Chrome和Safari上，单击第一个按钮后，表单和文本内部的文本不会改变方向。虽然这样，浏览器的控制台没有显示任何错误。

Chrome和Safari中是否有任何解决方法可以正常使用？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

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

  <form id="speakerForm">
<input type="button" id="toggleRTL" value="Activate RTL Support" class="k-button" />
    <input id="autocomplete" type="text" />
  </form>

  </body>
</html>

 <script>

  $('#toggleRTL').on('click', function(event) {
    console.log('activating');
    var form = $('body');
     console.log(form);
    if (form.hasClass('k-rtl')) {
      console.log('removing rtl support');
        form.removeClass('k-rtl')
    } else {
      console.log('adding r-tl support');
        form.addClass('k-rtl');
    }
})

        $("#autocomplete").kendoAutoComplete({
            dataSource: {
                data: [
                {name: "Google"}, 
                {name: "Bing"}
                ]
                         },
            dataTextField: "name",
         })
    </script>

Answer 1

按照上一篇文章的要求。这是一个适合您的解决方案：

我再次更新了道场。这应该在chrome http://dojo.telerik.com/AfeNi/15中工作我已经将属性dir添加到body标签并从ltr / rtl支持交换它

Chrome和Safari浏览器中的kendo ui RTL和LTR问题

1 个答案: