0

I am using a Lightning-datatable with an action column. When I place the LWC at the end of the Record Page and I click the action button to display the Dropdown menu, the list is not shown next to the button but somewhere else.

Dropdown menu not showing next to button

I am not applying any weird formatting to the data, but the standard LDS and class that modifies the height of the column headers. Does anyone know if this is an issue with the lightning-datatable component?

                <div id="datatable" if:false={isLoadingData}>
                    <lightning-datatable
                            class="wrapped-header-datatable"
                            key-field="Id"
                            data={data}
                            column-widths-mode="auto"
                            draft-values={draftValues}
                            suppress-bottom-bar
                            columns={columns}
                            errors={errors}
                            onrowaction={handleRowAction}>
                    </lightning-datatable>
                </div>

Part of the Javascript that includes the Column and the actions definition:

const actions = [{label:'--None--',name:''},{label:'Double-Billed',name:'Double-Billed'},{label:'Resolved',name:'Resolved'},{label:'Offset',name:'Offset'},{label:'Corrected Claim',name:'Corrected Claim'},{label:'LOA',name:'LOA'}];
    
const columns = [
    { label: 'Episode Provider',    fieldName: 'epURL',                                      type: 'url',       hideDefaultActions: true, typeAttributes: {label:{fieldName:'Name'},target: '_blank'}, initialWidth: 180},
    { label: 'Include in Fee Reductions', fieldName: 'Include_in_reduction_calculations__c', type: 'boolean',   hideDefaultActions: true,   editable:true, initialWidth: 85, cellAtributes:{alignment:'center'}, },
    { label: 'Missing Receipt',     fieldName: 'Missing_Receipt__c',                         type: 'boolean',   hideDefaultActions: true,   editable:true, initialWidth:85, cellAtributes:{alignment:'center'}},
    { label: 'Contract Rate',       fieldName: 'Provider_Contract_Rate_Amount__c',           type: 'currency',  hideDefaultActions: true, initialWidth:120},
    { label: 'Standard Rate',       fieldName: 'Provider_Standard_Rate_Amount__c',           type: 'currency',  hideDefaultActions: true, initialWidth:120},           
    { label: 'Override Rate',       fieldName: 'Manual_Override_Amt__c',                     type: 'currency',  hideDefaultActions: true,   editable:true , initialWidth:120} ,
    { label: 'Provider Rate',       fieldName: 'Provider_Rate__c',                           type: 'currency',  hideDefaultActions: true, initialWidth:120},
    { label: 'Net Payments',        fieldName: 'Net_Payments__c',                            type: 'currency',  hideDefaultActions: true, initialWidth:120},  
    { label: 'Fee Adjs',            fieldName: 'Total_Fee_Adjustments__c',                   type: 'currency',  hideDefaultActions: true, initialWidth:120},
    { label: 'Balance',             fieldName: 'Episode_Provider_Balance__c',                type: 'currency',  hideDefaultActions: true, initialWidth:120},
    { label: 'Prepaid Amt.',        fieldName: 'Prepay_Provider_Amount__c',                  type: 'currency',  hideDefaultActions: true, initialWidth:120},
    { label: 'Account',             fieldName: 'Provider_Account_URL',                       type: 'url',       hideDefaultActions: true, initialWidth:120,  wrapText: true, typeAttributes: {label:{fieldName:'Provider_Account_Name'},target: '_blank'}},
    { label: 'Contact',             fieldName: 'Provider_Contact_URL',                       type: 'url',       hideDefaultActions: true, initialWidth:120, wrapText: true, typeAttributes: {label:{fieldName:'Provider_Contact_Name'},target: '_blank'}},
    { label: 'Claim Date',          fieldName: 'Claim_Received_Date__c',                     type: 'date-local',hideDefaultActions: true, editable:true , initialWidth:120, cellAtributes:{alignment:'center'},typeAttributes:{month: "numeric",day: "numeric",year:"numeric"}},
    { label: '',                    fieldName: 'Select_Today', hideLabel:true,               type: 'button-icon',typeAttributes:{alternativeText:'Set Today\'s date',iconClass:'slds-var-m-left_xx-small',iconName:'utility:date_input',name:'today',title:'Set Today\'s date',variant:'bare'}, hideDefaultActions: true, cellAtributes:{alignment:'center'}},
    { label: 'Double Billed',       fieldName: 'Double_Billed__c',                           type: 'text',      hideDefaultActions: true, editable:false , initialWidth:120, cellAtributes:{alignment:'center'}},  
    { label: '',                    fieldName: 'Select_Double_Billed', hideLabel:true,       type: 'action',    typeAttributes:{rowActions: actions},   hideDefaultActions: true ,  editable:false , initialWidth:120, cellAtributes:{alignment:'center'}},   
];

The css class "wrapped-header-datatable". This is loaded using a static resource, the loadStyle library and a renderedCallback.

.wrapped-header-datatable .slds-table .slds-th__action .slds-truncate{
    max-width: 100%;
    overflow: hidden;
    text-overflow: unset;
    white-space: pre-line;
    /*  uncomment this if you want break the words further */
    /* word-wrap: break-word;*/

}

.wrapped-header-datatable .slds-table .slds-th__action {
    height: 5rem;
    border-bottom: 1px solid rgb(206 206 206);
}

.wrapped-header-datatable .slds-table .slds-line-height_reset{
    height: 3rem;
}

If I put the Lightning web component elsewhere but the bottom, the dropdown is shown correctly, but when I placed the LWC at the bottom of the record page, there is sort of a limit in the drop down that show's it like the picture I shared.

4
  • 1
    Its good if you paste your code. that make things more clear. Commented Nov 29, 2022 at 15:34
  • Thanks for your feedback, @KaranSharma. I updated the post. Commented Nov 29, 2022 at 15:45
  • remove this from action button cellAtributes:{alignment:'center'} Commented Nov 29, 2022 at 16:34
  • @Rijwandeltax thanks for the suggestion. I did it and refreshed cache, but still the same behaviour. Commented Nov 29, 2022 at 19:20

0

You must log in to answer this question.

Browse other questions tagged .