kendo ui RTL and LTR issue in chrome and safari browsers

问题

This dojo http://dojo.telerik.com/AfeNi/8 has been thankfully provided by David Shorthose for toggling between RTL and LTR directions in Kendo UI widgets.

It works without problems on Firefox. On Chrome and Safari, after the first button click, the form and the text inside it does not change the direction. Although this, browser's console does not show any errors.

Is there are any workarounds to work without problems in Chrome and 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>

回答1:

As requested from the previous post. Here is a solution for you:

I have updated the dojo again. this should now work in chrome http://dojo.telerik.com/AfeNi/15 I have added the attribute dir to the body tag and swapping this from ltr/rtl support

来源：https://stackoverflow.com/questions/33435532/kendo-ui-rtl-and-ltr-issue-in-chrome-and-safari-browsers

标签

google-chrome

kendo-ui

safari