Inconsistent Scrolling Behaviour in Lightning Quick Actions

Question

I have a lightning component I want to embed in a quick action. The component has content which might vary in size, which means I cannot predict what height my quick action needs.

As a simple example, here's my component which has content which is larger than the quick action box:

<aura:component implements="force:lightningQuickAction">
    <aura:iteration items="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15" var="item">
        <h1>{!item}</h1><br />
    </aura:iteration>
</aura:component>

This results in the content of the component spilling out of the bottom of the docked modal, without a scrollbar to access it

However, if I expand the action by clicking the middle button at the top right, then it shows all my content

And if the window is too small then it gets a scrollbar

To work around this, I can add a ui:scrollerWrapper with a hardcoded height to enable scrolling in the docked mode, but this results in double scrollbars depending on the viewport size and what size the scrollerWrapper is set to (in both Lightning Experience and Mobile):

To make this work better I can use css in a static resource to peek out into the Salesforce DOM to adjust my UI's behaviour, :

.forceDockingPanel.DOCKED .scrollerSize {
    height: 400px;
}

.forceDockingPanel.MAXIMIZED .scrollerSize {
    height: 100%;
}

<aura:component description="bigQuickAction" implements="force:lightningQuickAction">
    <ltng:require styles="{!$Resource.cssScroller}" />
    <ui:scrollerWrapper class="scrollerSize">
        <aura:iteration items="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15" var="item">
            <h1>{!item}</h1><br />
        </aura:iteration>
    </ui:scrollerWrapper>
</aura:component>

But this seems hacky as it's based on undocumented Salesforce components which might change. Is there a proper way to make the quick action respond to the size of its container correctly?

I also tried to use the utility bar APIs, but as you'd expect they don't appear to function outside of the utility bar.

Answer 1

Instead of specifying a percentage, which likely won't work for all scenarios anyways, consider using the more versatile viewport measurements css:

.forceDockingPanel.MAXIMIZED .scrollerSize {
    height: 60vh;
}

This is supported on all modern browsers that support Lightning. 1vh is 1% of the total height of the viewport. I'm suggesting 60, which should take up about 60% of the screen, but you might use media queries to set breakpoints (e.g. if the screen is smaller than some height, maybe bump it up to 80vh).