8

I have a modal that seems to stop rendering footer completely randomly.

So far what worked was clearing cache, logging out, restarting browser (brave). Anything I do with code has no effect (comment out all JS, all HTML).

Now it's down to sample syntax

    <lightning-quick-action-panel header="header">
        body
        <div slot="footer">
            footer
        </div>
    </lightning-quick-action-panel>

Down to this result:

enter image description here

Looking via chrome dev tools I can see slds-hide class is not removed from footer for some reason.

Edit: I also use this component wrapped in aura's lightning:isUrladdressable and force:lightningQuickActionWithoutHeader context, where this bug appeared again. Disabled all extensions I use to no avail. Restarting Brave browser did the trick tho.

3
  • I can see the lightning-quick-action-panel component is still on Beta. maybe that's the reason of its inconsistent behavior. by any change do you have any CSS implemented on your component?
    – McCubo
    Commented Jul 20, 2022 at 13:53
  • I don't have any CSS. Starting to suspect it might be brave or some extension issue. Will try to isolate once it appears again.
    – dzh
    Commented Jul 21, 2022 at 10:21
  • 2
    This is still an issue, and the component is out of beta since Summer GA. Commented Oct 13, 2022 at 17:41

3 Answers 3

4

I had a similar issue, using lightning-quick-action-panel made footer stop rendering in random behavior.

Adding a custom class to enforce visibility did the trick for me, at least as a workaround.

inside my component.html:

<div slot="footer" class="force-visible">

in component.css

.force-visible{
    visibility: visible !important;
}

Using api version 55.0

3

My work-around was to put the footer outside the lightning-quick-action-panel tag. class="slds-modal__footer" ensure the correct styling.

<lightning-quick-action-panel class="slds-is-relative" header={title}>
    <div class="" if:true={showContent}> content </div>
</lightning-quick-action-panel>
<div  class="slds-modal__footer">
    <lightning-button
        variant="neutral"
        label="Cancel"
        onclick={closeAction}
    ></lightning-button>
    <lightning-button
        variant="brand"
        label="Send Request"
        class="slds-m-left_x-small"
        onclick={sendRequest}
    ></lightning-button>
</div>
1

I upgraded to version 57, and it started to be more stable.

You must log in to answer this question.

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