Issue with AngularJS bug in Internet Explorer when using regular style attribute compared to ng-style

While working with Angular JS v1.1.5, I came across an interesting issue related to Internet Explorer.

In IE 9, 10, 11, and Edge, the following code snippet doesn't work as expected, even though it works fine in Chrome:

<div style="width: {{progress.percent()}}%;"></div>

On the other hand, this alternative method works seamlessly in all browsers:

<div ng-style="{width: progress.percent() + '%'}"></div>

I'm intrigued why the first option fails to function properly in IE/Edge. Are there any known bugs associated with this?

javascriptcssangularjsinternet-explorermicrosoft-edge

Answer №1

During the rendering process in IE 9 & 10, any invalid HTML is removed before parsing.

An example of invalid HTML is style="display: {{'block'}}" because it contains unknown {{}} syntax which causes the attribute to be rendered as style=""

Instead of using ng-style, you can utilize the ng-attr-* directive like this:

<div ng-attr-style="{{'width: '+ progress.percent() +'%;'}}"></div>

This will generate a style attribute when there is a change in the value returned by progress.percent().

For more details, refer to this archived github issue

Why does the style attribute become empty?

Answer №2

the issue also occurs in Microsoft Edge. Simply format it as shown below

[style.width.px]="20"

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

Select Items Based on Filtering Arrays

Within the JSON format below, there exists a state in addition to a checkbox state that signifies the selection of categories. initialData = [ { store_name: 'Shop 1', women: false, men: false, kids: true}, { store_name: 'Shop ...

javascriptarraysjsonreactjsfilter

Learn the simple technique for creating smooth 3D object animations when clicking using Three.JS

As someone who is just beginning to explore Three.JS and 3D web development, I am eager to recreate a specific action that I saw in this video: https://www.youtube.com/watch?v=HWSTxPc8npk&feature=youtu.be&t=7s. The concept involves a group of 3D pl ...

javascript3dthree.js

How can you assign a strokeStyle color to a Canvas using a CSS property?

Our team is currently working on an Angular2 / Ionic 2 project where we have implemented a HTML Canvas element that allows users to draw on it. One challenge we are facing is how to set the Canvas strokeStyle property using a color provided by a CSS style. ...

javascripthtmlcssangularcanvas

Creating Bootstrap 4 forms with full-width input fields within an inline form layout

In my observation, there is a noticeable variance in the behavior of in-line forms between the older version of Bootstrap, v3, and the newer version, V4. I have included two code snippets below: Bootstrap 3 In Bootstrap 3, when the page width decreases, ...

htmlcsstwitter-bootstrapcss-selectorsbootstrap-4

Express.js syncing with Backbone.js using only POST and GET requests

My application utilizes Backbone.js on the client-side and Express.js on the back-end. I am facing challenges when it comes to syncing all parts of my API by utilizing the backbone model and collection, which are configured with urlRoot: "/users". I am re ...

javascriptajaxnode.jsbackbone.jsexpress

Executing a <SCRIPT> within an Ajax-loaded webpage

Utilizing Framework7 for my web application has been great since it allows me to load pages using Ajax, giving it an app-like feel. However, I am facing a challenge with making the "ad" code display properly on Ajax-loaded pages. If you inspect the ad co ...

javascriptjqueryajaxhtml-framework-7

Troublesome Display of Badges in Bootstrap 5

My goal is to include a badge on a label, however all it does is change the text color to white <asp:Label CssClass="badge badge-pill badge-success" ID="Label1" runat="server" Text="Label"></asp:Label> ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Setting a custom tab as the default route in Expo Router without relying on an index.tsx file - here's how!

In the development of my React Native app using Expo Router, I am structuring it into main sections with a tabs layout consisting of Events, Search, and Profile. Here is an image showcasing the desired folder structure: The main sections Events, Search, ...

javascriptreactjsreact-nativeexpoexpo-router

What is the best way to access a DOM node within a withStyle component?

Currently, I am involved in a react project where my team and I are utilizing Material UI. I encountered a situation where I needed to access the DOM node of another component that was wrapped by a HOC. To achieve this, I attempted using ref in React but o ...

javascriptreactjsmaterial-uireact-with-styles

Splitting the express instance and routes into two separate server files

Currently, I am in the process of developing a middleware that can run two server files within the same instance while keeping the routes separate. Allow me to elaborate with examples: Directory Structure: /common-server /routers /routes.js /ap ...

javascriptnode.jsexpress

"Exploring the intricacies of routing within a Node.js application

I previously had around 100 blogs displayed on the "/" page with links for sorting by date (a-z). When clicking on these links, I am redirected to different routes - one is "/sort_by_date" and the other is "/sort_alphabetically". Unfortunately, I was unabl ...

javascriptnode.jsmongoose

What is the best way to send a variable value to a React component?

Currently, I'm utilizing the https://github.com/and-who/react-p5-wrapper library to integrate p5.js into my React project. I'm interested in finding a solution to pass a value generated within the p5 Sketch file back into React. Specifically, I ...

javascriptreactjsp5.js

The utilization of useEffect causes the page to go blank

Essentially, the issue is that once I include useEffect(() => { const fetchData = async () => { const result = await fetch('http://localhost.com/ping'); console.log(result) }; fetchData(); }, []); in my compone ...

javascriptreactjsreact-hooks

Tips for designing a unique custom scrollbar

I'm in need of some CSS expertise to help me create a custom scroll bar that resembles the one shown in the image. The key requirement is for the background to be transparent, although I've temporarily positioned it against a green backdrop. ...

css

Enhancing React components with Hooks and markers

I'm facing a syntax uncertainty regarding how to update React state using hooks in two specific scenarios. 1) I have a state named company and a form that populates it. In the contacts section, there are two fields for the company employee (name and ...

javascriptreactjsjsxreact-hooks

Ways to prevent text from wrapping in CSS

I'm currently in the process of creating a new website and I've encountered an issue with my CSS. It seems that whenever there is a space present, the text inside h2 tags wraps unexpectedly. You can visit the site here. Here's the specific ...

htmlcsscss-float

Morris.js tutorial: Enhancing bar charts with data labels

I have this: https://i.sstatic.net/GXjur.png But I want this instead: https://i.sstatic.net/spcS2.png Does morris.js support this feature? If not, what would be the most effective method to implement it? ...

javascriptjqueryhtmlcssmorris.js

What is the best way to incorporate HTML and JavaScript into an Angular view?

Within my markup, there is a substantial chunk of code enclosed with ng-controller tags. The structure resembles this: <div ng-controller="MyController"> <script> // MyController is initialized with current_item_data to streamline ...

javascriptangularjs

Dynamically loading iframes with JQuery

I have implemented a jQuery script to load another URL after a successful AJAX request. $(document).ready(function() { var $loaded = $("#siteloader").data('loaded'); if($loaded == false){ $("#siteloader").load(function (){ ...

javascriptjqueryajaxiframe

Troubleshooting Alignment Problems in Bootstrap 4 Tables

Having trouble aligning certain items. In thisFiddle, I have two options: Option1 and Option2. I want to align the toggle switches with the ones in the first two rows. Specifically, I want the toggle switches to be in the second column of the table and t ...

htmlcssbootstrap-4