0

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:

enter image description here

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

3 Answers 3

0

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>
0

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>

0

1)Create CSS file

slds-modal__content{
overflow: hidden
}

2)Create static resource and upload css file you created

3)Import static resource in JS

import { loadStyle } from 'lightning/platformResourceLoader';
import WorkOrderStylingCSS from '@salesforce/resourceUrl/WorkOrderStylingCSS';

4)Load css

renderedCallback() {
        Promise.all([
            loadStyle(this, WorkOrderStylingCSS)
        ]).then(() => {
            console.log('Files loaded');
        })
          .catch(error => {
                console.log(error.body.message);
            });
  }
1
  • More or less a copy of Raj Kiran's answer, isn't it? Commented Mar 21 at 10:05

You must log in to answer this question.

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