chrome和safari浏览器中的kendo ui RTL和LTR问题 [英] kendo ui RTL and LTR issue in chrome and safari browsers

查看:201
本文介绍了chrome和safari浏览器中的kendo ui RTL和LTR问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

此dojo http://dojo.telerik.com/AfeNi/8 已经由 David Shorthose 提供在Kendo UI小部件中在RTL和LTR方向之间切换.

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.

它在Firefox上可以正常工作.在Chrome和Safari上,单击第一个按钮后,表单和表单中的文本不会更改方向.尽管如此,浏览器的控制台不会显示任何错误.

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.

在Chrome和Safari中是否有任何变通办法可以正常工作?

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>

推荐答案

根据上一篇文章的要求.这是为您提供的解决方案:

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

我再次更新了道场.现在可以在chrome http://dojo.telerik.com/AfeNi/15 中运行了将属性dir添加到body标记中,并从ltr/rtl支持交换

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

这篇关于chrome和safari浏览器中的kendo ui RTL和LTR问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆