CODEWITHSUNDEEP
htmlangularjsinput
webta.st.ic
webta.st.ic

Reputation: 5169

Input flickers on ng-if

Hi I've got follow code:

.container2 {
  width: 300px;
  height: 50px;
  color: white;
  background-color: grey;
}
.myClass1 {
  color: red;
}
.myClass2 {
  color: blue;
}
<!doctype html>
<html ng-app="myApp" ng-controller="myController">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js">
  </script>

  <script>
    angular.module("myApp", []).controller("myController", function($scope) {

    });
  </script>

</head>

<body>
  <div class="container1">
    <input ng-if="!isOpen" type="text" placeholder="Text...">
    <span ng-if="!isOpen">Text1</span>
    <span ng-if="!isOpen">Text2</span>
    <span ng-if="isOpen">Text, when container 2 is open</span>
    <button class="myClass1" ng-click="isOpen = !isOpen" ng-class="{myClass2: isOpen}">Click here...</button>

  </div>

  <div class="container2" ng-show="isOpen">Container 2 is open now...</div>

</body>

</html>

I builded a small example in my code snippet which shows the same logic as my solution. Here in the snippet it works fine (the code is really the same), but in my real solution, when I click on the button, it hides liquid the "Text 1" and "Text 2", shows the "Text when cont 2 is open", but the input waits a little bit and then it's also hidden. When I close it again all elements show and hide liquid...By opening, the input flickers and then hides...I try to show it to you with the images bellow:

Step 1: Default it's closed and the three elements are there, the other one not: enter image description here

Step 2: I click on the button, it should hide 3 elements and show one text, but for perhaps 0.5s the input stays there, flickers and than hides - for 0.5 seconds it looks like this:

enter image description here

Step 3: After it flickers for 0.5s it hides and than its correct like this:

enter image description here

I hope this is clear enough. Has someone an idea? Thanks and cheers.

IMPORTANT EDIT: It flickers with every form-element such as input, select, checkbox etc. When I put a div around the input and give the ng-if expression to the div, it works fine..

Upvotes: 0

Views: 4323

Answers (2)

CodeMilian
CodeMilian

Reputation: 1290

This worked for me

.ng-hide.ng-hide-animate {
display: none !important;
}

https://github.com/angular/angular.js/issues/14015

Upvotes: 0

Vicky Kumar
Vicky Kumar

Reputation: 1408

Try using ng-show despite of ng-if that may work beacuse ng-if removes dom element but ng-show doesnot actually remove dom element it just hides the dome element

That flickering may be due to the reason that dom element is removed

Upvotes: 2

Related Questions