Issue with Domsanitizer bypasssecuritytruststyle functionality on Internet Explorer 11 not resolving

CSS:- Implementing the style property from modalStyle in TypeScript

<div class="modal" tabindex="1000" [style]="modalStyle" >

Angular Component:- Using DomSanitizer to adjust height, display, and min-height properties. While this configuration works in Chrome, it does not work in IE 11 causing the popup to not display properly.

import { DomSanitizer } from '@angular/platform-browser';
export class Abc {
    get modalStyle() {
            return this._domSanitizer.bypassSecurityTrustStyle('display:block; height:'
              + (this.modalDialog.nativeElement.clientHeight + 200) + 'px;'
              + 'min-height:1500' + '' + 'px;');
          }
        }
       }

Answer №1

Consider implementing the following polyfill:

<script src=https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.15/polyfillsIE.min.js></script>

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

Combining rows and columns in Flexbox design

https://i.stack.imgur.com/tDLii.png I'm able to easily create this layout using the float property, but I'm having some difficulties achieving the same with flexbox. CSS: .a { background: red; float: left; width: 30%; ...

The rotation of an image in Microsoft Edge results in an HTML file display

One of the images on my website is sourced like this: <p> <img src="images/image.jpg" style="width: 50%;" /> </p> Surprisingly, in Chrome and Firefox, the image looks fine (just how I uploaded it to the server). H ...

Tips for navigating a dynamic viewport using scroll movement

Attempting to create a responsive page with two distinct sections at this example link including: Map View Table View Both of these views (table and map divs) need to be responsive without a hard-coded height, so the size of the map div adjusts automatic ...

Activate the CSS on a click event using the onClick method

I am trying to implement a transition that triggers when clicking on a specific div element. Currently, the transition only occurs with the active css class. How can I achieve this effect by simply clicking on the div itself? I am using reactjs and believe ...

Angular 2 - Directive fails to work if not properly imported into its module

Trying to use a directive across multiple modules in Angular can be tricky. If you declare it in a shared module and import that module into other modules, you might encounter errors. It seems like the directive only works when declared directly within the ...

Retrieving user data from Ngrx store upon page refresh

Is it safe to retrieve user data from the database and store it after refreshing the page? Currently, I am getting the user ID from local storage in Guard and dispatching an action to retrieve the user data. Should I consider a different approach for thi ...

What could be causing transition to not be recognized as an element in HTML?

<template> <header> <nav class="container"> <div class="branding"> <router-link class="header" :to="{name : 'Home'}">>FireBlogs</router-link> </div& ...

Achieving proper layout in Material-UI Autocomplete by splitting long words

Exploring the Material-UI autocomplete feature for the first time has brought some challenges my way. I am working with usernames, which have a specific length limit but could exceed the space available in the autocomplete view. Upon examining the sandbox ...

In the Bootstrap Grid system, all posts are aligned to the left side

I have created a gallery with Bootstrap in React.js. The posts are currently displayed using the bootstrap grid system, however, all posts appear on the left side and I am struggling to center them. Any ideas on how to achieve this? After applying justify ...

How can we effectively transfer a value from TypeScript/Angular?

I am new to TypeScript and Angular, and I'm struggling with assigning a value to a variable within a function and then using that value outside of the function. In regular JavaScript, I would declare the variable first, define its value in the functio ...

What steps can I take to safeguard my App API from unauthorized access and misuse?

Is this the right place to ask for help with my app that is split into frontend (Angular) and backend/API (Nodejs)? The API has public endpoints for the frontend, but I want to protect it from being accessed or exploited by unauthorized parties. I consid ...

Pause before sending each request

How can we optimize the Async Validator so that it only sends a request to JSON once, instead of every time a letter is typed in the Email form? isEmailExist(): AsyncValidatorFn { return (control: AbstractControl): Observable<any> => { ...

Incorporate Margins for Table Cells in Outlook (HTML Email)

I'm currently in the process of creating an email newsletter and testing it out on Litmus. Here's how the newsletter design should appear (refer to the image below): Although I understand that it may not look exactly the same on Outlook, is the ...

Show the entire background photo

Below is the CSS code I am currently using within an inline style: <div class="home-hero" style="background-image: url(https://dummyimage.com/300); background-position: 100% center; background-repeat: no-repeat; background-size: cover; height: 100%; wi ...

Is there a way to retrieve the ID by using the autocomplete feature to search for a user's first name and last name in PHP

Check out this code from index.php (all credit to the original owner): <HTML> <HEAD> <TITLE> Ajax php Auto Suggest </TITLE> <link href="css/style.css" rel="stylesheet" type="text/css"> <SCRIPT LANGUAGE="JavaScript ...

Imitate adjustment of orientation without the need to resize the browser window

Is there a way to simulate page portrait orientation on a PC browser without resizing the window? In my HTML code, I have a <div> element that displays content dynamically based on screen orientation. Is it possible to use JavaScript to trick this & ...

What is the CSS method for determining the distance from the top of a container to the edge of the window?

I am working on a basic HTML layout that contains a few elements, including a scrollable div container located below them. Since the height of unknown-height is uncertain due to dynamic element generation, I need a simple method to enable scrolling in the ...

A gap only appears in the drop-down navigation when the page is scrolled

After finally completing my first website, I encountered a frustrating issue. When scrolling down the page, a gap appears in the navigation bar, making it impossible to access the dropdown menus. I've been struggling to fix this problem on my own. Any ...

"Combining background images with javascript can result in displaying visual elements

Hello! I am in need of assistance with a CSS + Javascript fog effect that I have developed. It is functioning properly on Firefox, Opera, and Chrome but encountering issues on IE and Edge browsers. The effect involves moving two background images within a ...

JavaScript Processing Multiple Input Values to Produce an Output

Hello, I am working on creating a stamp script that will allow users to enter their name and address into three fields. Later, these fields will be displayed in the stamp edition. Currently, I have set up 3 input fields where users can input their data. He ...