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
![Overrunning content]()
However, if I expand the action by clicking the middle button at the top right, then it shows all my content
![Expanded]()
And if the window is too small then it gets a scrollbar
![Scrolling]()
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):
![Double Scroll Bars]()
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.
