issue with how page is appearing on IE11

Question

Please bear with me as I'm new to IE11 debugging.

For the info, this bug is only happening in IE11, browsers like Chrome or FireFox do not have this issue

Currently part of my webpage is displaying that

This is ok.

However, when choosing through a different property, and clicking on one of the property this is what I have

From what I can see, the CSS is not used/read correctly by IE11.

This is my CSS

        .floor-details-item {
            min-height: 160px;
            width: 100%;
            border: 0.5px solid #C2EFDF;
            border-radius: 2px; 
            margin-bottom: 5px;
            background-color: #FFFFFF;
            padding: 5px;

            &.opac {
                opacity: 0.2;
            }

I've tried to add an !important on the width in the css but IE11 refuses to take into account and still gives me the wrong width.

        .floor-details-item {
            min-height: 160px;
            width: 100% !important;
            border: 0.5px solid #C2EFDF;
            border-radius: 2px; 
            margin-bottom: 5px;
            background-color: #FFFFFF;
            padding: 5px;

            &.opac {
                opacity: 0.2;
            }

When going through IE11 console when inspecting the element, this is what I have

Funny part is when I change it manually and typing 100% as you can see below, then the width issue is fixed.

Thank you for any insight you may provide.

update :

I have tried the following on the CSS. As this link is saying that IE 11 is not fond of width with !important, I added in the css the following

        .floor-details-item {
            min-height: 160px;
            /*width: 100% !important;*/
            /*adding auto and initial*/
            width: auto;
            width: initial;

But nothing so far.

Hi @Paulie_D, I'm working with IE11. My code has no issue on Chrome or FF as I said on the beginning of my question. I can give you my code but it will not help you in this occasion. — Andy K, Oct 02 '19 at 15:11
If you recreate it HERE we can open it in IE11....and inspect. — Paulie_D, Oct 02 '19 at 15:31
can you post the Enough code (include the html code and related CSS style) to reproduce the problem as in [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). it will be easier for us to test and help you solve it. — Zhi Lv, Oct 03 '19 at 05:40
Hi @ZhiLv-MSFT, let me build that up. I was busy yesterday eve. — Andy K, Oct 03 '19 at 05:55

score 1 · Answer 1 · answered Oct 02 '19 at 15:38

1

Try to add min-width: 1px;. It saved my ass many times;-)

answered Oct 02 '19 at 15:38

johannesdz

423
1
4
11

Hi @johannesdz, thank you but alas, I've put the min-width in the CSS and I still have the issue. If you have any other tips, I'm all ears. – Andy K Oct 02 '19 at 15:46
Can you comment the css from .floor-details? – johannesdz Oct 02 '19 at 15:48
what do you want me to comment? – Andy K Oct 02 '19 at 15:55
let me do that @johannesdz – Andy K Oct 02 '19 at 16:07
Hi @johannesdz, as you have been the only one answering my question, the points are yours. I've been able to find my issue as you can see above. – Andy K Oct 11 '19 at 15:21

score 0 · Accepted Answer · answered Oct 11 '19 at 15:20

After many wrangles plus the help of my colleague, I found where the issue was located.

It was due to the css.

    .floor-details {
        width: 44%;
        margin-left: 5px;
        height: 555px;
        float: left;
        background-color: #FFFFFF;
        border-radius: 5px;
        border: 1px solid #eeeeee;
        border-left: 20px solid #C2EFDF;
        overflow-y: auto;
        padding: 5px;
        //display: flex;
        align-items: center;
        flex-direction: column;

        .floor-details-item {
            min-height: 160px;
            width: 100%;
            border: 0.5px solid #C2EFDF;
            border-radius: 2px; 
            margin-bottom: 5px;
            background-color: #FFFFFF;
            padding: 5px;
            //display: flex;
            min-width: 1px;

IE11 does not like the display: flex; as a child. Removing it from the child also mean removing it from the parent as you can see from the code. Once done, the issue is fixed.

issue with how page is appearing on IE11

2 Answers2