3

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.

2
  • Though a bit overkill, is using overlayLibrary an option for you? You can specify heights and use .slds-modal_large to specify width.
    – tsalb
    Jun 21, 2018 at 22:45
  • Thanks - I'm trying to use the standard quick actions, the overlay library only allows me to pop a new modal over the existing actions. I could refactor my quick action to use this, but I'd prefer to keep with the standard UI paradigms.
    – James
    Jun 28, 2018 at 10:28

1 Answer 1

0

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).

3
  • Thanks for the input, I hadn't come across vh and that does look useful. What I'm really looking for is how to avoid digging into Salesforce's css (".forceDockingPanel.MAXIMIZED") to work out the context of my page, as it's brittle.
    – James
    Jun 21, 2018 at 19:42
  • @James Hmm, I see your point. Maybe you could try the vh thing and get back to me? I'd be interested in finding out the results.
    – sfdcfox
    Jun 21, 2018 at 19:47
  • Sorry - to be clear, I did try with vh - but I haven't worked out how it might help. The quick action container toggles between fixed and dynamic sizes. When docked it is fixed to 480px high (appears hardcoded by salesforce), hence why my scroll is 400px when docked. When maximised Salesforce allows the quick action to consume 100% (minus some padding) of the window hence why I don't want to hard code it to 400px nor Xvh.
    – James
    Jun 21, 2018 at 20:20

You must log in to answer this question.

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