IE11 displaying errors with flex-box layout in Angular8 causing screen misalignment

I'm currently experiencing a CSS issue specifically in IE11, as it seems to work fine on all other browsers except for this one. The problem arises due to the length of a string causing the screen not to fit properly within the browser window.

To address this problem, I have attempted setting various CSS properties such as display:flex, flex: 1 1 auto, flex-wrap:wrap, white-space:pre-wrap on the parent div element that contains the long string.

I would greatly appreciate any help and guidance on how to troubleshoot and resolve this issue. Additionally, I have provided a link to a cropped screenshot of the problem.https://i.sstatic.net/uolPP.png

Below is an excerpt of the HTML generated in IE11:

<div class="row pad1-0" _ngcontent-ean-c19="">
    <aside class="col-md-3 ng-star-inserted" id="sidebar" style="top: 0px;" _ngcontent-ean-c19="">
        <div class="toggle-side" _ngcontent-ean-c19="">
            <i class="fa fa-bars" _ngcontent-ean-c19=""></i>
        </div>
        ....(additional HTML markup)....
    </aside>
    <main class="col-md-9 ng-star-inserted" id="main" _ngcontent-ean-c19="">
        <section class="overview-options pad2-0 tright" _ngcontent-ean-c19="">
            ....(additional HTML markup)....
        </section>
        ....(additional HTML markup)....
    </main>
</div>
cssbootstrap-4flexbox

Answer №1

After spending 3 hours on it, I finally resolved the problem. The issue was with word-break: break-word; in IE11. I switched it to word-break: break-all; and now it works perfectly. :)

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

Which language should I focus on mastering in order to create a script for my Epson receipt printer? (Check out the manual for reference)

Printer Model: TM-T88V User Manual: Receipt-marker Web template for the printer: (Provided by Epson) I'm completely new to computer languages and have been trying to understand how to print receipts. I've researched XML, HTML, CSS, and Jav ...

javascripthtmlcssxml

How can I make an image disappear after animation with CSS?

I experimented with this code snippet in an attempt to fade out an image, .splash-wrapper { animation: fadeIn 4s; -webkit-animation: fadeIn 4s; -moz-animation: fadeIn 4s; -o-animation: fadeIn 4s; -ms-animation: fadeIn 4s; animation-duration: ...

htmlcssfadeout

Styling your printed documents in Next.js 10

Within my Next 10 application, I am able to bring in global styles by importing them in _app.js in the following manner: import 'assets/css/app.css' I want to incorporate a print stylesheet as well. Instead of using a @media print { } query with ...

cssnext.jsprint-style

What are the essential files needed in Kendo UI Core for a mobile app?

Several months ago, I created a trial Kendo mobile app but now I want to verify it using the most recent version of Kendo UI Core. In my previous project, I referenced the following files: <link href="../styles/kendo.common.min.css" rel="stylesheet" / ...

javascripthtmlcsskendo-mobile

What is the best way to vertically center a caption when an image is being hovered over

I'm facing an issue with aligning my caption vertically inside a div when hovering. The image within the div is larger than the div, and I want the caption to be at the center of the div. HTML <div class="container-fluid"> <div id="pag ...

htmlcsscentering

Unusual scroll bar movements when using jQuery validation

When I click the Add Dependent link button, I wanted the scroll bar to automatically scroll to the bottom, and it does just that. However, there is a small issue after the postback where the text "Please fix the following problems:" briefly appears, even t ...

c#javascriptasp.netcssjquery-validate

Issue with Angular: Mobile view toggle button in the navbar is unresponsive

While the dropdowns are functioning correctly in web mode, the navbar toggle isn't working as expected in small screens or mobile mode. I've been trying to figure out the issue by referring to code from CodePen that I am learning from. Despite i ...

javascripthtmlangularbootstrap-4angular-ui-bootstrap

Removing a CSS Class Using Tampermonkey: A Step-by-Step Guide

I'm completely new to CSS and javascript, so please bear with me. My goal is to remove the class disable-stream from each of the div elements located under the div with the class "stream-notifications". Below is an image for reference: Even though I ...

javascriptjqueryhtmlcsstampermonkey

Tips for styling a datatable scrollbar with CSS

My preference is to utilize the datatable API when creating tables. $('#datatable-example').dataTable({ "scrollX": true, "info" : false, "fnDrawCallback" : function(oSettings) { $('td').removeClass('sor ...

jquerycssdatatable

Even when applying a class, the CSS link:hover style will only affect the initial occurrence

I've hit a wall on this issue and can't seem to find a solution. I styled a few links using classes, but it seems that only the first link is accepting the :hover and :visited state styling. I made sure to use classes to style all of them. Not su ...

htmlcsshyperlinkhovervisited

Enable automatic indentation for wrapped text

I'm still learning the ropes here, but I'm looking to have text automatically indent when it's wrapped. Instead of this: Peter piper picked a peck of pickled peppers. It should look like this: Peter piper picked a peck of pickled pepp ...

csstextformatting

The design template is failing to be implemented on my personal server utilizing node.js

I've encountered an issue while developing the signup page on my local server using Bootstrap 4. The CSS is not getting applied properly when I run it locally, although it displays correctly in the browser. Can someone explain why this is happening? ...

javascripthtmlcssnode.jsbootstrap-4

JavaScript code for validating two passwords is malfunctioning

I'm currently working on a registration form for my website and I'm trying to implement a JS script that compares two password inputs (password and repeat password) and displays a message saying "passwords are not the same." Below is the code I h ...

javascripthtmlbootstrap-4

Modifying the verbiage in the menu based on location

Could anyone provide some assistance or guidance on how to solve a small issue I'm facing? I would like the text in my navigation to change depending on my position on the site (position1, position2 etc.) Here is a fiddle link for reference: http:// ...

jquerycssnavigationposition

The appearance of CSS can vary depending on the screen resolutions in which it is

I am encountering an issue with my HTML component that utilizes a booking engine. The parent width of the component is set, and the children elements inherit this width. There are three input fields and a search button within the component. The problem ari ...

htmlformscss

Conceal the Angular Material toolbar (top navigation bar) automatically when scrolling downwards

In my Angular application, the main navigation consists of a standard toolbar positioned at the top of the page. My goal is to have this navigation bar smoothly scroll up with the user as they scroll down, and then reappear when they scroll back up. I at ...

cssangulartypescriptuser-experience

Modify the text of the "search" button in bootstrap4

Clicking the "Search" button on my website redirects me to How can I modify the URL from "search" to "my_search" in this link? I want the link to be I am using the Django web framework. The fix should also support queries from the form. My code vacanc ...

pythonhtmldjangobootstrap-4

Customize your Google Translate experience by choosing your own option values

Is there a way to trigger the same JavaScript calls by clicking on an option value in an HTML select element as with text-based links in the Google Translate widget? Check out this jsfiddle for more information <html> <body> <select i ...

javascriptjqueryhtmlcss

CSS styling not functioning properly

After spending a considerable amount of time on this issue... <div id="pager" style="top: 5px; position: relative; " class="pager" > <form> <img src="http://tablesorter.com/addons/pager/icons/first.png" alt="first" class="first" ...

htmlcsstablesorter

Suggestions for merging 2 distinct :host() selectors with contrasting styles in Angular

I am facing a challenge with combining the CSS of two Angular components into one file. The issue arises from the difference in the :host() code for each component. For example: style1.css includes: :host() { flex: 2; overflow: auto; } style2.css ...

cssangularangularjs