Skip to main content

This content has been archived and is no longer being updated. Links may not function; however, this content may be relevant to outdated versions of the product.

Support Article

Collapsible section inside tab layout doesn't work for IE 8

SA-1906

Summary



When Tab layout contains multiple collapsible section and when user collapses a section, section is collapsed but IE8 leaves an empty area.  Also, when expanding a section, the expanded section is displayed above the collapsible section below in Internet Explorer version 8 (IE 8).  IE 8 does not move collapsible sections inside Tab layout on collapse/expand actions.

Error Messages



N/A


Steps to Reproduce


  1. Add Tab layout to a section.

  2. Add multiple collapsible sections inside the Tab layout.

  3. Open the page in IE 8. Collapses a section and observe that IE 8 leaves an empty space.

  4. Expand a section and observe that IE 8 does not move the collapsible section.


  5.  

Resolution



This issue is been resolved by adding the following code into UserWorkForm section.


<script>
pega.ui.Doc.prototype.expandHeader = function(expandElement, event, container, bFromKeyboard) {
                  event = event || window.event; 
        var target = pega.util.Event.getTarget(event);
        if(bFromKeyboard && event.keyCode != 32 && event.keyCode != 13)
            return;
        if (!target.tagName.match(/^(input|select|textarea|button|a)$/gi)) {
             /* Code to handle icons */
            if(target.tagName.toLowerCase() == "i" || target.tagName.toLowerCase() == "img") { /*BUG-158775: Stopping icons/controls present on the header from expanding/collapsing the header on click.*/
                if(target.getAttribute("data-ctl") && target.getAttribute("data-ctl") == "Icon") {
                    return;
                }
            }
            if (container) {
                this.loadContainer(expandElement, event, container);
            } else {
                this.expandIt(expandElement, event);
            }
            this.setARIAAttributesForHeader(expandElement, event);
        }
        pega.ui.grid.prototype.triggerBrowserReflow();
    };
</script>

 
Suggest Edit

Published January 31, 2016 - Updated October 8, 2020

Did you find this content helpful? Yes No

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us