IE11 issue with Lightning Design System

[ingire]

Hi! my team and I are using Lightning desing System to write a page in Salesforce to edit the Account. This works perfectly in Chrome or Firefox but it has some issues in Internet Explorer. In fact, we are using grid sizing system in our components to have responsive pages but in IE11 this is not working and the user needs to scroll right to see the second part of the page. Could you please help?

As a workaround we set a "< div >" with a max witdh but this is not sufficient as our client may use different browsers and different screens.

Thanks in advance for your support

Irene

[kaelig]

Thanks for using the Lightning Design System, @ingire!

Could you describe the steps to reproduce the issue so we can investigate on our end?

[stephenscholtz]

I was also having similar problems a couple days back. Thankfully it was decided we wouldn't support IE11. :P

This is non-comprehensive and has no code examples, so is the least helpful to you, but I'll post what I remember and if I have time I'll come back with more details.

The problem I was having was using the grid layout with form elements. I had single column for small, and a combination of 1-of-2 and 1-of-1 elements for medium screens and up. The symptoms were that the form elements would blow out the layout, going super wide on the page and forcing a horizontal scroll, textarea and input select in particular. Removing padding, margins on form elements seemed to help, as well as hard coding widths with pixels, but not always. Setting max-width on grid divs had minimal impact: the behaviour was very sporadic, page would look ok onload, but click on something, give it focus and some elements would change sizes suddenly. (!?)

Input select was the weirdest, I was dynamically loading in the select options from an sobject's field's schema, and prior to load the select would be one size, but when the options were loaded the input select would push out it's parent element, even if I hardcoded the input select's width. The input options were not very long strings of text.

Something I found, near the end before I gave up, was that if you stuck to just 1-of-1 or 1-of-2 sized blocks, IE11 didn't seem to have as much problems, but if you tried to mix them, then things would get funky.

Form elements seemed to have something to do with it. If my divs were super simple with paragraphs of latin, it was fine, but things got funky once a form element was in there.

[stephenscholtz]

Here's the some sample code that generates the problem in IE11. In my scenario, I'm hosting some lightning components inside of a VF page exposed in Salesforce Classic using Lightning Out, running Winter '17.

I pulled out all the rendered HTML from the lightning UI components I was using so you can see the plain HTML. Some of the component's CSS classes still remain below, like uiInput, uiInput--textarea, etc.

<div class="slds-grid slds-wrap">
    <div class="slds-col slds-size--1-of-1 slds-medium-size--1-of-2 slds-p-horizontal--small">
        <div class="slds-form">
            <div class="slds-form-element slds-m-bottom--small">
                <div class="uiInput uiInputTextArea uiInput--default uiInput--textarea">
                    <label class="slds-form-element__label uiLabel-left form-element__label uiLabel">
                        <span class="">Text Area 1</span>
                    </label>
                    <textarea class="slds-textarea textarea" cols="20" rows="5" maxlength="2000" aria-describedby="" placeholder="">
                    </textarea>
                </div>

            </div>
            <div class="slds-form-element slds-m-top--small slds-m-top--small slds-m-bottom--small">
                <div class="uiInput uiInputSelect uiInput--default uiInput--select">
                    <label class="slds-form-element__label uiLabel-left form-element__label uiLabel">
                        <span class="">Whatever</span>
                    </label>
                    <select class="slds-select select" size="1" aria-describedby="" >
                        <option value="yes" selected="selected" class="uiInputSelectOption">yes</option>
                        <option value="no" class="uiInputSelectOption">no</option>
                    </select>
                </div>
            </div>
            <div class="slds-form-element slds-m-bottom--small">
                <div class="uiInput uiInputTextArea uiInput--default uiInput--textarea">
                    <label class="slds-form-element__label uiLabel-left form-element__label uiLabel">
                        <span class="">Another Text Area 1</span>
                    </label>
                    <textarea class="slds-textarea textarea" cols="20" rows="5" maxlength="2000" aria-describedby="" placeholder="">
                    </textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="slds-col slds-size--1-of-1 slds-medium-size--1-of-2 slds-p-horizontal--small">
        <div class="slds-form">
            <div class="slds-form-element slds-m-bottom--small">
                <div class="uiInput uiInputTextArea uiInput--default uiInput--textarea">
                    <label class="slds-form-element__label uiLabel-left form-element__label uiLabel">
                        <span class="">Text Area 2</span>
                    </label>
                    <textarea class="slds-textarea textarea" cols="20" rows="5" maxlength="2000" aria-describedby="" placeholder="">
                    </textarea>
                </div>
            </div>
            <div class="slds-form-element slds-m-top--small slds-m-top--small slds-m-bottom--small">
                <div class="uiInput uiInputSelect uiInput--default uiInput--select">
                    <label class="slds-form-element__label uiLabel-left form-element__label uiLabel">
                        <span class="">Whatever</span>
                    </label>
                    <select class="slds-select select" size="1" aria-describedby="">
                        <option value="yes" selected="selected" class="uiInputSelectOption">yes</option>
                        <option value="no" class="uiInputSelectOption">no</option>
                    </select>
                </div>
            </div>
            <div class="slds-form-element slds-m-bottom--small">
                <div class="uiInput uiInputTextArea uiInput--default uiInput--textarea">
                    <label class="slds-form-element__label uiLabel-left form-element__label uiLabel">
                        <span class="">Another Text Area 2</span>
                    </label>
                    <textarea class="slds-textarea textarea" cols="20" rows="5" maxlength="2000" aria-describedby="" placeholder="">
                    </textarea>
                </div>
            </div>
        </div>
    </div>
    <div class="slds-col slds-size--1-of-1 slds-medium-size--1-of-1 slds-p-horizontal--small">
        <div class="slds-form">
            <div class="slds-form-element slds-m-bottom--small">
                <div class="uiInput uiInputTextArea uiInput--default uiInput--textarea">
                    <label class="slds-form-element__label uiLabel-left form-element__label uiLabel">
                        <span class="">Another one</span>
                    </label>
                    <textarea class="slds-textarea textarea" cols="20" rows="5" maxlength="2000" aria-describedby="" placeholder="">
                    </textarea>
                </div>
            </div>
        </div>
    </div>
    <div class="slds-col slds-size--1-of-1 slds-medium-size--1-of-1 slds-p-horizontal--small">
        <div class="slds-form">
            <div class="slds-form-element slds-m-bottom--small">
                <div class="uiInput uiInputTextArea uiInput--default uiInput--textarea">
                    <label class="slds-form-element__label uiLabel-left form-element__label uiLabel">
                        <span class="">Another one</span>
                    </label>
                    <textarea class="slds-textarea textarea" cols="20" rows="5" maxlength="2000" aria-describedby="" placeholder="">
                    </textarea>
                </div>
            </div>
        </div>
    </div>
    <div class="slds-col slds-size--1-of-1 slds-medium-size--1-of-1 slds-p-horizontal--small">
        <div class="slds-form slds-m-top--small slds-m-bottom--small">
            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <button class="slds-button slds-button--neutral slds-button slds-button--neutral">
                        Save
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Looks good in Chrome...

But IE11...

If I got rid of all the form elements, it seemed to be ok...

But if I started to put them back in, specifically inside of a 1-of-1 div that followed a 1-of-2 div (the first text area that appears in this screen shot), then it would blow out wide.

Various combinations of removing form elements and putting them back in would get different results, sometimes the layout would blow out wide and sometimes not. I didn't have time to try every iteration and see if there was a pattern, sorry!

[stevejwikeley]

So if I understand from @stephenscholtz y some of the form components are not compatible with ie.11? Can you confirm: @kaelig

[kaelig]

I wouldn't say that. We do support IE11 to some extent and I couldn't reproduce the bug in an isolated environment. It could be an issue with Visualforce or the Lightning experience.

Closing this as it's not related to the Design System itself.

[tsneed290]

I would like to add a comment since I recently ran into this and it took forever for me to find a solution; I'd like to share the solution here since this Github issue is a top Google search result for IE11 problems with SLDS Grids (Flexbox).

We saw this similar issue when using a VF Page to inject a Lightning component so that it is visible in Classic. We had a two column grid in our Lightning Component. When viewing it in IE11 in Classic Experience we saw that the grid widths were extremely large, forcing users to scroll right.

We found that the problem was the table included by Salesforce Classic that wraps around our VF Page content. You can find this table by querying the DOM for table#bodyTable. We found that if we moved our VF Page content outside of the table, the SLDS Grids rendered fine. So we knew the table element was causing the problem with properly sizing SLDS Grid Columns.

After some searching, we found that applying the following style to our VF Page injecting the Lightning Component fixed out issue:

<style>
table#bodyTable {
  table-layout: fixed;
}
</style>

Here's the full code snippet of our VF Page code:

<apex:page standardController="MyObj__c" sidebar="false">
    <apex:includeLightning />

    <div id="lightning" />

    <style>
        table#bodyTable {
          table-layout: fixed;
        }
    </style>

    <script>
        $Lightning.use("c:LtDepApp", function() {
          $Lightning.createComponent("c:MyComponent",
          {  },
          "lightning",
          function(cmp) { });
        });
    </script>
</apex:page>

[stefsullrew]

Interesting, @tsneed290 ... There's also a class that could be placed on the table if you were able to access its DOM: slds-table_fixed-layout.

Cheers

[tsneed290]

@stefsullrew That didn't seem to work in my case due to SLDS scoping when viewing in Classic Experience. I don't think this problem is directly related to SLDS itself, but more so of injecting Lightning Components into a VF Page so that it's viewable in Salesforce Classic. I just wanted to include it here since this is the first place I looked :)