LWC: Issue with lightning-quick-action-panel - Multiple scroll bars

Question

I am trying to use the lightning-quick-action-panel to create a quick action button which shows some fields for user to Edit. My issue is related to multiple scrollbars on the page.

my HTML file:

<template>
    <lightning-quick-action-panel header="Update Contact">
        <lightning-input
                type="date"
                data-id="startDate"
                label="Start Date"
                required="true"
                value={startDate}>
        </lightning-input>
        <lightning-input
                type="date"
                data-id="endDate"
                label="End Date"
                required="true"
                value={endDate}>
        </lightning-input>

        <lightning-dual-listbox name="days"
                                label="Week Days"
                                source-label="Available"
                                selected-label="Selected"
                                field-level-help="Week Days"
                                options={options}
                                required="true"
                                onchange={handleListBoxChange}>
        </lightning-dual-listbox>
        <lightning-input
                type="time"
                data-id="startTime"
                label="Login Start Time"
                required="true"
                value={startTime}>
        </lightning-input>
        <lightning-input
                type="time"
                data-id="endTime"
                label="Login End Time"
                required="true"
                value={endTime}>
        </lightning-input>
        <div slot="footer">
            <lightning-button
                    variant="neutral"
                    label="Cancel"
                    onclick={closeAction}
            ></lightning-button>
            <lightning-button
                    variant="brand"
                    label="Save"
                    class="slds-m-left_x-small"
                    onclick={startRecordUpdate}
            ></lightning-button>
        </div>
    </lightning-quick-action-panel>
</template>

my JS File:

import { LightningElement, api, track, wire} from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
export default class TestLwc extends LightningElement {
    @api recordId;
    @api invoke() {
        this.startRecordUpdate();
    }
    startRecordUpdate(event) {
    }
    closeAction() {
        this.dispatchEvent(new CloseActionScreenEvent());
    }
}

Issue Image:

Also I saw the below Known issue in IdeaExchange and I didn't enable any release updates feature in the org. IdeaExchange Known Issues

Any help would be appreciated

Answer 1

same as me too, I solved it,Please try it.

<template>
<lightning-quick-action-panel header="Update Contact">
    <div class="container" style="max-length:600px">
       ....
    </div>
    <div slot="footer">
        <lightning-button
                variant="neutral"
                label="Cancel"
                onclick={closeAction}
        ></lightning-button>
        <lightning-button
                variant="brand"
                label="Save"
                class="slds-m-left_x-small"
                onclick={startRecordUpdate}
        ></lightning-button>
    </div>
</lightning-quick-action-panel>

Answer 2

adding on top of neo.zho if you add the below css it will remove that scrollbar. But make sure to add your own height to the container.

create an external css file and import from static resource and load it

quickAction.css

.quick-actions-panel {
        overflow-y: hidden;
}

import { LightningElement, track, api } from "lwc";
import quickAction from '@salesforce/resourceUrl/quickActionCss';
import {loadStyle} from "lightning/platformResourceLoader";

export default class EmailLwc extends NavigationMixin(LightningElement) {
    connectedCallback() {
        loadStyle(this, quickAction );
    }
}

<template>
    <lightning-quick-action-panel header="Send Email">

     <div  class="container" style="max-height:500px">
       ---- your content -----
     </div>
     <div slot="footer">

        <lightning-button variant="brand" label="Send" title="send" 
            class="slds-m-left_x-small">
        </lightning-button>

    </div>
    </lightning-quick-action-panel>

</template>