I am using the SLDLS modal styles as documented and in general they work well. Below are two screen shots where the first has a small amount of lines (<p>Line</p> repeated) but the second has many more of those lines repeated which causes the top of the modal to be hidden.

The modal is created from a component that is being presented via a Lightning App Builder page.

The problem appears to be that while vertical scrolling is automatically added and the bottom edge of the modal is kept nicely above the utility bar, the top edge of the modal is positioned too high. The problem occurs using both standard navigation and console navigation (the latter used in the examples below).

Is there a clean way to fix this problem e.g. a small addition to the CSS?

OK example:

Not clipped modal

Not OK example:

Clipped modal

  • Yes, the top header part is with higher z-index make it 0 and also apply overflow: hidden on the header. May 9, 2018 at 18:11
  • @itzmukeshy7 Thanks. The header appears to be z-index 5 and the modal z-index 9001 already. Can you explain what you mean a bit more?
    – Keith C
    May 9, 2018 at 18:21

2 Answers 2


Use the ui:scrollerWrapper to impose a maximum height and automatic scroll bars.

    <ui:scrollerWrapper class="scrollerSize">
        <!--Scrollable content here -->

/** CSS **/
.THIS.scrollerSize {
    height: 300px;

The approach I have taken for now is to add this CSS to the component that contains the modal:

/* When modal height exceeds the screen height the top gets hidden without this */
.THIS .slds-modal__container {
    padding-top: 135px;

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .