AngularJS ngDialog facing a problem with kendo-mobile-switch when using transform: translateX()

Utilizing the kendo-mobile-switch in my AngularJS project has been successful on pages. However, when attempting to incorporate it into an ngDialog modal, a problem arises with the transform: translateX() property. Instead of shifting 27 pixels to the right, it remains stagnant.

To address this issue, I attempted to remove the ngdialog CSS classes from ngDialog.min.css, eliminating all references in my module. Despite these efforts, the problem persists as I am unable to adjust the position of my kendo-mobile-switch by 27 pixels to the right.

Below is a snippet of my code:

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

Has anyone encountered a similar issue with transform: translateX() involving kendo-mobile-switch within an ngDialog while working with AngularJS? If so, how was it resolved?

The visual representation of the issue can be viewed here: https://i.sstatic.net/4NRL9.png

I am experiencing the same problem and using Google Chrome Version 72.0.3626.81 (Official Build) (64-bit).

javascriptcssangularjskendo-ui

Answer №1

It appears that the issue may be related to custom CSS, as the provided code snippet does not exhibit any problems.

let application = angular.module('sampleApp', ['ngDialog', 'kendo.directives']);

application.controller('MainController', function($scope, ngDialog) {
  $scope.openDialog = function() {
    ngDialog.open({
      appendTo: '.main',
      overlay: false,
       template: `
         <div kendo-mobile-switch
         k-on-label="'YES'" 
         k-off-label="'NO'" 
         ng-model="data.selection"
         k-on-change="toggleSwitch()"
         data-qaid="switch-selection">
         </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="sampleApp">
  <div class="main" ng-controller="MainController">
    <button ng-click="openDialog()">Open Dialog</button>
    <div kendo-mobile-switch k-on-label="'YES'" k-off-label="'NO'" ng-model="data.selection" k-on-change="toggleSwitch()" data-qaid="switch-selection">
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Saving a variable within a for loop in JavaScript

Hey everyone, I could really use your help right now. Here's the code block I'm struggling with: function readyToSubmit(answerPack, answerArr, len) { for (var i = 0; i < answerArr.length; i++) { var questionId = answerArr[i].id; con ...

javascriptfor-loopclosures

What is the significance of using the variable name "$scope" in coding?

As a newcomer to Javascript, I recently finished reading the book Eloquent Javascript and am now delving into AngularJS from O'Reilly. While working on a code snippet provided in the AngularJS book, I encountered hours of frustration trying to figure ...

javascriptangularjs

What is the best way to keep track of the most recent 100 items?

In Angular, I want to store the last 100 items to display. Currently, I am using an array and inserting items with 'array.push'. If this method is not effective for this scenario, what alternative approach can I take? Here is a snippet of the co ...

javascriptangularjs

The setCountry function fails to properly change the country value

My goal is to establish a default country selection in checkbox options, I have three choices: United States, United Kingdom, and Rest of the world; Here's the constant called AVAILABLE_COUNTRIES which contains the iso codes for the mentioned countrie ...

javascriptreactjs

Tips for Successfully Sending Vue Data in Axios POST Call

I'm struggling to pass Vue data to an axios.post request. Using the Vue template doesn't seem to work. How can I successfully pass the Data? Here is my Code: <body> <div id="app" class="container"> <div> ...

javascriptvue.jsaxios

Executing the command causes an error when res.download() is called, resulting in a request

I am currently working on developing an archive that includes various .txt files and then I intend to download this archive. Take a look at the code snippet below: async function archiveAndDownload(res) { const bashCommand = ... const archive = ... ...

javascriptnode.jsexpressrequesthttp-get

Running a JavaScript function within a designated div element

I'm currently facing an issue with executing a javascript function - onload only in a specific div. I seem to be stuck on this problem, so if anyone could offer some assistance, I would greatly appreciate it. Thank you very much in advance! functio ...

javascriptjqueryhtml

What is causing this code to malfunction in AngularJS version 1.2?

Check out this code snippet I wrote using Angular 1.2: http://jsfiddle.net/VmkQy/1/ <div ng-app="app"> Title is: <span my-directive data-title="Test title">{{ title }}</span> </div> angular.module('app', []) .dir ...

javascriptangularjsangularjs-directive

Unable to change data in table TD using AJAX and PHP received JSON array

I am currently facing an issue with a PHP-AJAX script that is responsible for deleting financial rows from a table. The PHP script is functioning correctly and successfully deleting the rows. However, the problem arises within the success function of the A ...

javascriptjqueryajax

Guide on attaching an onclick event to a button created with a string in Next.js?

<div onClick={(event) => this.addToCart(event)}> <ReactMarkdownWithHtml children={this.props.customButton} allowDangerousHtml /> </div> In my current situation, I am facing an issue with the code above. The button is being rendered ...

javascripthtmlreactjsnext.js

Exploring JavaScript and accessing objects

I'm currently working on a small file-manager project in JavaScript and I've encountered an issue with the code. In the `get()` function, I am trying to access the `Content.files` array but it seems like there's some problem with variable sc ...

javascriptjqueryajaxjsonobject

Leverage require.js in combination with angular.js

Seeking assistance with require.js integration in Angular.js, encountering an error. Below is the code snippet: Configuration file: require.config({ paths: { angular: 'https://code.angularjs.org/1.5.5/angular.min', angularRo ...

javascriptangularjsrequirejs

Switching from using a computed property in Vue 2 to implementing the Vue 3 Composition API

I am currently in the process of updating my Vue 2 application to Vue 3 and I have been exploring how to work with computed properties using the Composition API in Vue 3. One particular challenge I am facing is migrating a Vue 2 computed property that pro ...

javascriptvue.jsvuejs2vuejs3

Events are not being received by the Discord.js client

My client is not receiving any interactions (slash commands) even though it should be able to handle them require("dotenv").config(); const { Client } = require("discord.js"); //disc = require("discord.js"); const axios = re ...

javascriptnode.jsdiscord.js

Unable to retrieve the "value" attribute from the DOM element of the plus/minus box

Looking to retrieve the "value" attribute from the selection box that allows users to choose the quantity of a specific item on my website. As a beginner in both Javascript and HTML, I noticed the attribute when inspecting the element: <input size="2" ...

javascriptjqueryhtmldomgoogle-tag-manager

Ways to center-align this menu (Spanish language)

I am working on optimizing the alignment of the menu on my website: My goal is to center the menu, as the English version looks good. #site-navigation { width: 980px; margin: 0 auto; text-align: left; } After analyzing the code, we have iden ...

htmlcss

Could you explain the distinction among req.path, req.params, and req.query?

I'm curious about the distinctions among req.path, req.params, req.query, and req.body in node.js. Can someone provide an explanation? ...

javascriptangularjsnode.jsjsonexpress

What is the reason behind Rxjs switchMap only emitting the final value from an of() observable source?

Here are two code snippets, one using map and the other using switchMap. The functionality of map is clear: of('foo', 'bar') .pipe(map((val) => sanitizer(val))) .subscribe((val) => console.log('value:', val)); func ...

javascriptangulartypescriptrxjs

Deactivate the button when an item is selected from the dropdown menu in JavaScript

I am working on a dropdown menu containing values that link to functions, along with a textbox and submit button. My goal is to have the submit button disabled or hidden when a specific value is selected from the dropdown, possibly alongside clearing the c ...

javascripthtml

How can I dynamically assign the formControlName to an <input> element within Angular?

I'm currently developing a component with the goal of streamlining and standardizing the appearance and functionality of our forms. The code snippet below illustrates the structure: Sample Implementation ... <my-form-input labelKey = "email" cont ...

javascriptangulartypescriptangular-componentsangular-forms