Apex Code Development You need to sign in to do that
Don't have an account?
Scrollable Utility Not Working on Aura Component in Global Action
Hi All,
I've got a Flow being called in a Global Action via a Lightning Aura Component. The Flow and Component are working, but for some reason the scrollable utility isn't. Does anyone have any idea what the problem could be?
Component:
I've got a Flow being called in a Global Action via a Lightning Aura Component. The Flow and Component are working, but for some reason the scrollable utility isn't. Does anyone have any idea what the problem could be?
Component:
<aura:component implements="force:lightningQuickActionWithoutHeader,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global">
<!-- Component is initialized -->
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<div class="slds-docked_container_align-left">
<div class="slds-scrollable">
<div class="slds-docked-modal_composer slds-grid slds-grid_vertical-align-left slds-grid_align-left slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
<div class="slds-docked-composer__body">
<lightning:flow aura:id="flowData" />
</div>
</div>
</div>
</div>
</aura:component>
Style:
.THIS .slds-scrollable {
overflow: auto !important;
}
.THIS .slds-docked-modal-composer {
max-width: auto;
}
Controller:
({
init : function(component) {
// Find the component whose aura:id is "flowData"
let flow = component.find("flowData");
// In that component, start your flow. Reference the flow's Unique Name/API Name.THIS
flow.startFlow("New_Case");
}
})
Any help would be greatly appreciated!
Update: I solved this issue by adding the "slds-scrollable" property to the "slds-docked-composer__body" class and set a fixed height of 25 rem in the css.
<aura:component implements="force:lightningQuickActionWithoutHeader,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global"> <!-- Component is initialized --> <aura:handler name="init" value="{!this}" action="{!c.init}" /> <div class="slds-docked_container_align-left"> <div class="slds-docked-modal_composer slds-grid slds-grid_vertical-align-left slds-grid_align-left slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1"> <div class="slds-docked-composer__body slds-scrollable"> <lightning:flow aura:id="flowData" /> </div> </div> </div> </aura:component>.THIS .slds-scrollable { overflow: auto !important; height: 25rem; } .THIS .slds-docked-modal-composer { max-width: auto; }All Answers
Update: I solved this issue by adding the "slds-scrollable" property to the "slds-docked-composer__body" class and set a fixed height of 25 rem in the css.
<aura:component implements="force:lightningQuickActionWithoutHeader,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global"> <!-- Component is initialized --> <aura:handler name="init" value="{!this}" action="{!c.init}" /> <div class="slds-docked_container_align-left"> <div class="slds-docked-modal_composer slds-grid slds-grid_vertical-align-left slds-grid_align-left slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1"> <div class="slds-docked-composer__body slds-scrollable"> <lightning:flow aura:id="flowData" /> </div> </div> </div> </aura:component>.THIS .slds-scrollable { overflow: auto !important; height: 25rem; } .THIS .slds-docked-modal-composer { max-width: auto; }