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. – itzmukeshy7 May 9 '18 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 '18 at 18:21

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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.