转换：AngularJS 中 ngDialog 上 kendo-mobile-switch 的 translateX() 问题

Question

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

我试图摆脱 ngDialog.min.css ngdialog 类来解决这个问题，我删除了我模块上的所有 ngdialog css 类，但问题仍然存在。我无法将我的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>

在AngularJS 中ngDialog 上的kendo-mobile-switch 上的transform: translateX() 是否有人遇到过类似的问题？它是如何解决的？

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

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

Answer 1

这个问题可能是由一些自定义 CSS 引起的，因为这个 sn-p 没有显示任何问题。

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>