function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ephwvanephwvan 

<lightning:datatable> - action columns menu is "cut" by the bottom of table

Hi, did anyone experince the following problem when working with <lightning:datatable>? (see images below). If menu window covers rows in grid, there is no problem. A workaround might be to add "empty" rows", but this comes with all implications for sorting. Is there a simpler, better solution?

Thanks in advance.
User-added image                            User-added image
Best Answer chosen by ephwvan
Alain CabonAlain Cabon
Hello Elena,

It is a complete mystery or ... the Session Settings (setup) could be different.

I just created a component Elena ( just copying / pasting your code )

User-added image

Application : ElenaApp.app ( button "Update Preview" )
  
<aura:application extends="force:slds" >
    <c:Elena />
</aura:application>

1) Test OK : with my CSS 
.THIS div.slds-scrollable_y { 
    height: 200px;
}

User-added image

2)  Test KO with the CSS by default 
.THIS {
}

User-added image


Your Session Settings could be the problem.

Try the code with a free developer org.

Alain

All Answers

Alain CabonAlain Cabon
Hi,

Add this for the style of your component: 
.THIS div.slds-scrollable_y { 
     height: 200px;
}

Alain
ephwvanephwvan
Hi Alain,
Thank you for replying. I applied styling to the div that wraps the grid but it doesn't seem to have any effect. The grid itself (without any changes) displays the vertical scroll when menu pops up, but once I'm trying to scroll, the menu disappears (and scroll as well).

Thanks again,
Elena

User-added image 
Alain CabonAlain Cabon
Ok that works with a simple app. 

Did you include your datatable itself in a <div style="height: 500px"> ?

Salesforce : documentation : The width and height of the datatable is determined by the container element. A scroller is appended to the table body if there are more rows to display. For example, you can restrict the height to 300px by applying CSS styling to the container element. 
<aura:component controller="ContactController">
    <aura:attribute name="columns" type="List" default="[]"/>
    <aura:attribute name="data" type="List" default="[]"/>
    <aura:attribute name="enableInfiniteLoading" type="Boolean" default="true"/>
    <aura:attribute name="initialRows" type="Integer" default="30"/>
    <aura:attribute name="rowsToLoad" type="Integer" default="50"/>
    <aura:attribute name="totalNumberOfRows" type="Integer" default="300"/>
    <aura:attribute name="loadMoreStatus" type="String" default=""/>
    <!-- Retrieve your data using an Apex Controller -->
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    <div style="height: 500px">
        <lightning:datatable
                columns="{! v.columns }"
                data="{! v.data }"
                keyField="id"
                enableInfiniteLoading="true"
                onloadmore="{! c.loadMoreData }"/>
    </div>
    {! v.loadMoreStatus }
</aura:component>
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_datatable.htm

If you could post your code, that could also be interesting.
 
ephwvanephwvan
There is really nothing special in my code, the div is 350 px height and in this case there are no more rows to load. When there are more rows the scroll bar shows up and actually the "action" menu shows perfectly fine (even for last row visible). The component is more complicated, it contains a tabset and a grid in each tab. This is one grid "snapshot" 
<div style="height: 350px; width:100%">
                  <lightning:datatable aura:id="suspectsTable" id="IDsuspectsTable"
                  	columns="{! v.suspectsColumns }"
                    data="{! v.suspects }"
                    keyField="Id"
                    hideCheckboxColumn="true"
                    minColumnWidth="150px"
                    sortedBy="{! v.sortedBy }" sortedDirection="{! v.sortedDirection }" defaultSortDirection="{! v.defaultSortDirection }"
                    onsort="{!c.updateColumnSorting}"
                    onrowaction="{!c.handleRowAction}" />
                </div>

User-added image
Thank you, I'll probably go with adding "fake" empty rows if total records is less than a given number (5?) and deal with sorting (or make no sorting if there are so few rows :))
Alain CabonAlain Cabon

I cannot reproduce your problem.

What did you use for the "scoped tabs" ?

https://www.lightningdesignsystem.com/components/scoped-tabs/#site-main-content

User-added image


User-added image



The difference should be the scoped tabs.

There is only one row in each datatable.

I tried to reproduce your problem but that always works for me.
 
ephwvanephwvan
Hi Alain, thanks so much for your time, here is the more of the markup component... but , no need to dig more, I just thought other people encountered the issue. Surely it is a "wrong"/"missing" style somewhere... 
<lightning:tabset variant="scoped" aura:id="tabWrapper">
            <lightning:tab label="Leads" id="leads">
                <div class="slds-grid slds-gutters">
                    <div class="slds-col slds-size_1-of-12">
                        <ui:outputURL label="Export" class="hw-link-button"
                                      value="{! '/apex/VFMyBusinessExport' + '?team=' + v.team + '&amp;memberId=' + v.memberId + '&amp;subject=leadsAndActivities'}" />
                    </div>
                    <div class="slds-col slds-size_1-of-12">
                        <ui:outputText class="hw-grid-total" value="{! 'Total items: ' + v.leads.length}" />
                    </div>
                </div>
                <div style="height: 350px">
                    <lightning:datatable aura:id="leadsTable" id="IDleadsTable"
                                         columns="{! v.leadColumns }"
                                         data="{! v.leads }"
                                         keyField="Id"
                                         hideCheckboxColumn="true"
                                         minColumnWidth="150px"
                                         sortedBy="{! v.sortedBy }"
                                         sortedDirection="{! v.sortedDirection }"
                                         defaultSortDirection="{! v.defaultSortDirection }"
                                         onsort="{!c.updateColumnSorting}"
                                         onrowaction="{!c.handleRowAction}" />

                </div>

            </lightning:tab>
....
Alain CabonAlain Cabon
Included into a Lex page, my component still works.

User-added image


That always works for me. 

The target page could be your problem (above it is a contact).

 
ephwvanephwvan
Hi Alain, this is the minimum component with controller (no helper needed) I've created to reproduce the issue. I've created a lightning comp tab to run it. Only if you see something easy (without spending too much time) let me know please and thanks again.
Elena 
<aura:component implements="force:appHostable" access="global" >
	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <aura:attribute name="items1" type="Object" />
    <aura:attribute name="items1Columns" type="List" access="public" />
    <aura:attribute name="items2" type="Object" />
    <aura:attribute name="items2Columns" type="List" access="public" />
    
    <!-- PAGE HEADER -->
	<div class="slds-page-header slds-page-header_object-home">
		<lightning:layout >
			<lightning:layoutItem >
				<lightning:icon iconName="standard:business_hours" />
			</lightning:layoutItem>
			<lightning:layoutItem class="slds-m-left_small">
				<p class="slds-text-title_caps slds-line-height_reset">'FirstName LastName'</p>
				<h1 class="slds-page-header__title slds-p-right_x-small">Business</h1>
			</lightning:layoutItem>
		</lightning:layout>        
        <br/>
    </div>    
           <lightning:accordion activeSectionName="summary" aura:id="mainAcc"> 
           		<lightning:accordionSection name="summary" label="SUMMARY">
                       <div style="height: 350px">
                        <lightning:datatable aura:id="i1Table" id="IDi1Table"
                                         columns="{! v.items1Columns }"
                                         data="{! v.items1 }"
                                         keyField="Id"
                                         hideCheckboxColumn="true"
                                         minColumnWidth="150px"                  
                                         onrowaction="{!c.handleRowAction}" />

                </div>

           		</lightning:accordionSection>               	 
               <lightning:accordionSection name="details" label="DETAILS" >
                   <div style="height: 350px">
                        <lightning:datatable aura:id="i1Table" id="IDi2Table"
                                         columns="{! v.items2Columns }"
                                         data="{! v.items2 }"
                                         keyField="Id"
                                         hideCheckboxColumn="true"
                                         minColumnWidth="150px"                                                                                  
                                         onrowaction="{!c.handleRowAction}" />

                </div>

               </lightning:accordionSection>
           </lightning:accordion>
    
    <div style="height:100px"></div>
</aura:component>
({
    doInit: function (component, event, helper) {
        //helper.loadContext(component);
        component.set("v.items1Columns", [
            { label: 'Action', type:'action', typeAttributes:{rowActions: [
                {label:'Show Activities' , name:'activities'},
                {label:'Show Last Update' , name:'mgntupdate'}
            ]}},
            { label: 'Name', fieldName:'Name', type: 'text'},            
            { label: 'Owner', fieldName: 'Owner', type: 'text'}
        ]);
        component.set("v.items2Columns", [
            {
                label: 'Action', type: 'action', typeAttributes: {
                    rowActions: [
                        { label: 'Show Activities', name: 'activities' },
                        { label: 'Show Last Update', name: 'mgntupdate' }
                    ]
                }
            },
            { label: 'Name', fieldName: 'Name', type: 'text' },
            { label: 'Owner', fieldName: 'Owner', type: 'text' }
        ]);
        component.set("v.items1", [
            { Id: '1', Name: 'Grid1Row1Name', Owner: 'Grid1Row1Owner' },
            { Id: '2', Name: 'Grid1Row2Name', Owner: 'Grid1Row2Owner' }]);
        component.set("v.items2", [
            { Id: '1', Name: 'Grid2Row1Name', Owner: 'Grid2Row1Owner' },
            { Id: '2', Name: 'Grid2Row2Name', Owner: 'Grid2Row2Owner' }]);

    }
    
})
User-added image
 
Alain CabonAlain Cabon
Hello Elena,

It is a complete mystery or ... the Session Settings (setup) could be different.

I just created a component Elena ( just copying / pasting your code )

User-added image

Application : ElenaApp.app ( button "Update Preview" )
  
<aura:application extends="force:slds" >
    <c:Elena />
</aura:application>

1) Test OK : with my CSS 
.THIS div.slds-scrollable_y { 
    height: 200px;
}

User-added image

2)  Test KO with the CSS by default 
.THIS {
}

User-added image


Your Session Settings could be the problem.

Try the code with a free developer org.

Alain
This was selected as the best answer
ephwvanephwvan
Hi Alain, thanks so much for your help. It was my mistake from the beginning, trying to attach the div style to a particular div in the component. Actually when I applied div.slds-scrollable_y per component I made it work (I wonder when you said it worked ok without this CSS if browser cache was deleted).  Without using div.slds-scrollable_y I got the same "ugly" behaviour :)

Elena
Alain CabonAlain Cabon
Elena,

Here's an important tip when you develop Lex components.

Great superbadge: Lightning Component Framework Specialist​

Prework and Notes: In the Setup > Security Controls > Session Settings section of Salesforce Classic, disable the component cache by deactivating the setting for Enable secure and persistent browser caching to improve performance.

https://trailhead.salesforce.com/en/superbadges/superbadge_lcf

So a Lex developer always works with this option deactivated as you have found by yourself.
That is a good practice recommended by Salesforce during a Lex development generally.

https://developer.salesforce.com/forums/ForumsMain?id=9060G0000005aArQAI