transform: translateX() 问题 kendo-mobile-switch on ngDialog in AngularJS

Question

我在 AngularJS 项目中使用 kendo-mobile-switch。它适用于页面。但是，当我尝试在 ngDialog 上使用它时，ngDialog 模态上的 transform: translateX() 组件出现问题。它没有向右移动 27 个像素，而是停留在同一个地方。

我试图摆脱 ngDialog.min.css ngdialog class 来解决这个问题，我删除了所有 ngdialog css classes在我的模块上，但问题仍然存在。我无法将我的 kendo-mobile-switch 切换到 27 像素右

这是我的代码：

<div  ng-controller="navBarLimitedUseKeyCtrl" focus-group="" focus-group-head="stop" focus-group-tail="loop">
    <div kendo-mobile-switch
         k-on-label="'YES'" k-off-label="'NO'" ng-model="var.oneShot"
         k-on-change="onChangeOneShot()" data-qaid="chk-oneShot-default">
    </div>
</div>

是否有人对 transform: translateX() for kendo-mobile-switch on ngDialog in AngularJS 有类似的问题？它是如何修复的？

该代码对我来说是这样的：

与我报告的问题相同。我正在使用 Google Chrome 版本 72.0.3626.81（官方构建）（64 位）

Answer 1

问题可能是由某些自定义 CSS 引起的，因为此代码段未显示任何问题。

var app = angular.module('exampleApp', ['ngDialog', 'kendo.directives']);

app.controller('MainCtrl', function($scope, ngDialog) {
  $scope.clickToOpen = function() {
    ngDialog.open({
      appendTo: '.main',
      overlay: false,
      template: `
         <div kendo-mobile-switch
         k-on-label="'YES'" 
         k-off-label="'NO'" 
         ng-model="var.oneShot"
         k-on-change="onChangeOneShot()" 
         data-qaid="chk-oneShot-default">
         </div>
         <input type="checkbox" />
        `,
      plain: true,
      className: 'ngdialog-theme-default'
    });
  };
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/css/ngDialog.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/css/ngDialog-theme-default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/css/ngDialog-theme-plain.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.mobile.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/js/ngDialog.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>

<div ng-app="exampleApp">
  <div class="main" ng-controller="MainCtrl">
    <button ng-click="clickToOpen()">Open</button>
    <div kendo-mobile-switch k-on-label="'YES'" k-off-label="'NO'" ng-model="var.oneShot" k-on-change="onChangeOneShot()" data-qaid="chk-oneShot-default">
    </div>
  </div>
</div>

transform: translateX() 问题 kendo-mobile-switch on ngDialog in AngularJS

transform: translateX() issue for kendo-mobile-switch on ngDialog in AngularJS

javascript

css

kendo-ui

angularjs