The disabled button is not displayed when it is disabled

Encountering an issue specific to Chrome version 60.0.3112.90 where changing the disabled attribute of a button causes it to disappear.

A minimal, complete, and verifiable example has been prepared wherein clicking the + button toggles the disabled attribute.

Example Link

  • The element still remains in the DOM
  • The element does not have display: none applied
  • Zooming out and then back in reveals the element again (using Ctrl and scroll)
  • The element reappears when adding margin or padding attributes to the wrap div

Removing the overflow: hidden property seems to resolve the issue, but this causes text overlap on buttons in the actual setup. Attempted replacing it with overflow-x: hidden, but did not work.

Question

  • Why does this behavior occur?
  • Are there alternative solutions other than removing overflow: hidden?
cssangularjstwitter-bootstrapgoogle-chromeoverflow

Answer №1

I have encountered a situation where elements randomly disappear, especially when using position: fixed. One solution I found is to apply translateZ(0) to the element, which triggers the browser to repaint it and prevent it from disappearing.

angular.module('App',[])
.controller('MyCtrl', ['$scope', function ($scope) {
  $scope.b = true;
    }
])
div.wrap {
  width: 50px;
}
button {
  overflow: hidden;
  transform: translateZ(0);
}
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.min.js"></script>
<body ng-app="App">
<div ng-controller="MyCtrl" >
  <div class="wrap">
    <button class="btn btn-mini pull-left">A</button>
    <button class="btn btn-mini pull-right" ng-disabled="b">B</button> 
  </div>
  <button ng-click="b=!b">+</button>
</div>
</body>

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

How can we stop the Bootstrap carousel from pausing when the mouse hovers over it and keep it cycling automatically?

Is there a way to stop the Bootstrap carousel from pausing when hovering with the mouse and instead have it continue cycling through items automatically? I've tried changing the pause argument from "hover" as mentioned in the documentation, but when ...

javascripthovertwitter-bootstrap

AngularJS blueimp file upload not functioning as expected

I'm currently working on testing the integration of the blueimp jquery-fileupload plugin with angularjs. Here is the simplified code I have written for this purpose: [controller.js] app.controller('myAppController', function ($scope, uplo ...

angularjsjquery-file-upload

Even though my form allows submission of invalid data, my validation process remains effective and accurate

Here is the code I have written: <!doctype html> <html lang="en"> <head> <title>Testing form input</title> <style type="text/css></style> <script type="text/javascript" src="validation.js"></script> &l ...

javascripthtmlcssformsvalidation

What is the best method to center a div on the screen?

Is there a way to have a div open in the center of the screen? ...

javascriptcss

Is it possible to transfer Angular form validation to a separate DOM element using a custom directive?

I've developed a currency input directive that performs basic number validation and parsing using $parse to return a numeric value. In addition, I wanted to display a dollar sign before the input field using CSS :before. However, the issue arises beca ...

angularjsangularjs-directive

The ng-click directive is not functioning properly when used within an ng-repeat loop

Trying to showcase products based on brands, but encountering issues with ng-click inside ng-repeat. However, ng-click outside the ng-repeat is functioning properly. Could there possibly be a conflict within ng-repeat...? Module var myApp = angular.modul ...

angularjsangularjs-scopeangularjs-ng-repeat

Incorrect CSS percentage calculations detected on mobile devices

My webpage consists of three large containers, each with an alpha transparent background. While they display correctly on desktop browsers, I'm facing alignment issues on tablets (both iOS and Android) and iPhones where the percentage sum seems to be ...

htmlioscss

In order for Bootstrap's JavaScript to function properly, it relies on the presence of

I am currently diving into the Manning Getting MEAN book and I'm interested in using bootstrap sass. I have already loaded bootstrap-loader. However, when I initiate nodemon, I encounter the following error: /Users/mglaz/Projects/mean/theCMF/node_mod ...

node.jstwitter-bootstrapexpress

The print preview displays a single div in an incorrect location

I have successfully created a javascript plot and wanted to incorporate a legend that overlaps the plot. Unfortunately, the function I used does not support directly overlapping legends, but it does allow for placing the legend in a separate div. To work a ...

javascripthtmlcss

Prevent Text Overflow in CSS, Material-UI, and React styling efforts

I am facing an issue where the cardTitle is overlapping the Card when the text is too long. Currently, I am manually setting a static maxWidth, but I would prefer for it to adjust based on the size of the Card. Is there a way to achieve this dynamically? ...

cssreactjsmaterial-ui

What methods can be used to seamlessly incorporate Angular into an established JavaScript framework that heavily relies on the clone function?

I am currently working on a web application that was developed using Knockout and JQuery around a year ago. I want to introduce Angular into the mix by creating a new interface with the intention of gradually transitioning the entire application to Angular ...

angularjs

Create SCSS to style multiple CSS classes

Are there more efficient ways to create css helper classes like the ones shown below? Can I use scss to generate cleaner and better classes? Thank you. .m-1 { margin: 1px !important; } .m-2 { margin: 2px !important } .m-3 { margin: 3px !important } .m-4 ...

csssass

Enhance Your File Uploads with Custom Images in Bootstrap

For the file upload buttons, I have used the given image by customizing the button look using Bootstrap 3. Here is an example of how I achieved this: <label class="btn btn-primary" for="my-file-selector"> <input id="my-file-selector" type="fi ...

htmlcsstwitter-bootstrap

What are the steps to sorting in JavaScript?

I need help with sorting an array. The array I have looks like this: var temp = [{"rank":3,"name":"Xan"},{"rank":1,"name":"Man"},{"rank":2,"name":"Han"}] I've tried to sort it using the following code: temp.sort(function(a){ a.rank}) But unfortun ...

javascriptangularjsarrayssortingmean

CSS Styles Only Apply to the Initial Column on the Website

It seems like the css is only working on the first column to display the item-meta. Everything appears to be in place when inspected, but for some reason, the opacity does not change back to 1. It's strange because it works fine in the first column ev ...

htmlcsswordpresscss-multicolumn-layout

Mastering the integration of bootstrap datepicker - jquery plugin within AngularJS

Is it feasible to integrate this plugin into an AngularJS export table with filters, including the usage of ng-model and other functionalities? The plugin In particular, I am interested in utilizing the "range" option for selecting dates from/to. ...

angularjstwitter-bootstrapangularjs-directivebootstrap-datepickerangularjs-ng-model

The reverse animation for .is-exiting in Smoothstate.js is not triggering

I've been searching for a solution to my issue but haven't had any luck finding one that works for me. Currently, I am using smoothstate.js to trigger animations when the page loads and ideally reverse them when the page exits. However, while th ...

jquerycsssmoothstate.js

Align button text vertically in the middle using Flexbox with Bootstrap 4

Why is the text in the button displaying at the top instead of the center when using internet explorer? button { height: 100px; } <div class="container"> <button class="w-100 f-default-f btn btn-primary d-flex justify-content-between px-3"& ...

csstwitter-bootstrapflexboxbootstrap-4microsoft-edge

Tips for temporarily preventing a digest cycle when modifying a scope variable

Is there a way to edit an array of objects in AngularJS, linked to the view through ng-repeat, without updating the scope until all objects have been modified? Consider this scenario: I need to update each object in the array and only then reflect the ch ...

javascriptarraysangularjsscopedigest

The dropdown feature in AngularJS experiencing sporadic malfunctions on Google Chrome

HTML: <select id="bId" ng-options="b as b.name for b in books" ng-model="selectedBook" ng-change='onBookChange()'> </select> The issue: The options are not always displaying and the selected option is not visible. List ...

htmlangularjs