+ Start a Discussion
Matyas CsabaMatyas Csaba 

Make slds-grid scrollable

Hello Helper

I am building a Ligthning component  where I  have a grid  witrh col  items and inside each  column cell  i am inserting  other component(Ligthning:datatable)

When the component is  displayed its  heigth  is  adjusted  to match the height  of the datatable like  below:

User-added image
I DO NOT  want this

I  would  like  to  define the height of the column box  and if  datatable  has many  rows  i  would  like to add scrollign to  the grid col

I  guess  i  have to use  class="slds-scrollable"
BUt I  am not able  to do it properly

See below  a piece of  my  code  where I define 1  column

        <div class="slds-grid">
          <div class="slds-col slds-box  slds-size_3-of-12  ">
            <span >
                                <lightning:datatable data="{!obj.innerdata}" 
                                    columns="{!v.InnerOppTHeader}" 
                                    keyField="id"  
                                    hideCheckboxColumn="true"
                                    >    
                                </lightning:datatable> 
            </span>
          </div>
   ...
  </div>


any  sugestions?

Thanks in advance
Csbaa
Best Answer chosen by Matyas Csaba
Sunil MadanaSunil Madana
Did you try the below:
<div class="slds-grid" style="height:300px; overflow:auto !important;">
        <div class="slds-col slds-box  slds-size_3-of-12">
            <lightning:datatable data="{!obj.innerdata}" 
                                    columns="{!v.InnerOppTHeader}" 
                                    keyField="id"  
                                    hideCheckboxColumn="true"
                                    >    
           </lightning:datatable>
       </div>
.......................
</div>
OR
<div class="slds-grid">
        <div class="slds-col slds-box  slds-size_3-of-12" style="height:300px; overflow:auto !important;">
            <lightning:datatable data="{!obj.innerdata}" 
                                    columns="{!v.InnerOppTHeader}" 
                                    keyField="id"  
                                    hideCheckboxColumn="true"
                                    >    
           </lightning:datatable>
       </div>
.......................
</div>
OR
<div class="slds-grid">
        <div class="slds-col slds-box  slds-size_3-of-12">
            <div style="height:300px; overflow:auto !important;">
                <lightning:datatable data="{!obj.innerdata}" 
                                    columns="{!v.InnerOppTHeader}" 
                                    keyField="id"  
                                    hideCheckboxColumn="true"
                                    >    
                </lightning:datatable>
            </div>
        </div>
.......................
</div>
Hope it helps and mark answer correct so that it helps others.

All Answers

Sunil MadanaSunil Madana
Did you try the below:
<div class="slds-grid" style="height:300px; overflow:auto !important;">
        <div class="slds-col slds-box  slds-size_3-of-12">
            <lightning:datatable data="{!obj.innerdata}" 
                                    columns="{!v.InnerOppTHeader}" 
                                    keyField="id"  
                                    hideCheckboxColumn="true"
                                    >    
           </lightning:datatable>
       </div>
.......................
</div>
OR
<div class="slds-grid">
        <div class="slds-col slds-box  slds-size_3-of-12" style="height:300px; overflow:auto !important;">
            <lightning:datatable data="{!obj.innerdata}" 
                                    columns="{!v.InnerOppTHeader}" 
                                    keyField="id"  
                                    hideCheckboxColumn="true"
                                    >    
           </lightning:datatable>
       </div>
.......................
</div>
OR
<div class="slds-grid">
        <div class="slds-col slds-box  slds-size_3-of-12">
            <div style="height:300px; overflow:auto !important;">
                <lightning:datatable data="{!obj.innerdata}" 
                                    columns="{!v.InnerOppTHeader}" 
                                    keyField="id"  
                                    hideCheckboxColumn="true"
                                    >    
                </lightning:datatable>
            </div>
        </div>
.......................
</div>
Hope it helps and mark answer correct so that it helps others.
This was selected as the best answer
Matyas CsabaMatyas Csaba
Thank  for the fast  answer