Apex Code Development You need to sign in to do that
Don't have an account?
RohitJ Adding scrollbar to grid
Hi All,
I have added two lightning component inside a parent lightning component. I have added slds-scrollable to both div class of the 2 lightning components as below
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_1-of-3 slds-scrollable">
<c:Cmp1 recordId="xxxxxxx"/>
</div>
<div class="slds-col slds-size_2-of-3 slds-scrollable">
<c:Cmp2/>
</div>
</div>
But for some reason the scroll bar is not appearing on the two components, rather i get a scroll bar for the complete page.
Issue 2:
Under the observation section, the Textarea is not aligning with other components. It appears bit below.
Code for the component is below
<div class="slds-grid slds-gutters ">
<div class="slds-col slds-size_4-of-12">
<!-- <label class="slds-form-element__label">{!field.fieldDescription}</label> -->
<label class="slds-form-element__label">Description</label>
<!-- <lightning:outputField variant="label-hidden" fieldName="{!field.fieldDescription}"/> -->
</div>
<div class="slds-col slds-size_1-of-12">
<lightning:helptext
content="{!field.fieldHint}" />
</div>
<div class="slds-col slds-size_3-of-12">
<lightning:radioGroup name="radioGroup" options="{! v.Ratings }" value="{! v.value }" type="button"
class="customRadioCls" />
</div>
<div class="slds-col slds-size_4-of-12">
<lightning:textarea name="input3" placeholder="Comments/Remarks for the observation" />
</div>
I have added two lightning component inside a parent lightning component. I have added slds-scrollable to both div class of the 2 lightning components as below
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_1-of-3 slds-scrollable">
<c:Cmp1 recordId="xxxxxxx"/>
</div>
<div class="slds-col slds-size_2-of-3 slds-scrollable">
<c:Cmp2/>
</div>
</div>
But for some reason the scroll bar is not appearing on the two components, rather i get a scroll bar for the complete page.
Issue 2:
Under the observation section, the Textarea is not aligning with other components. It appears bit below.
Code for the component is below
<div class="slds-grid slds-gutters ">
<div class="slds-col slds-size_4-of-12">
<!-- <label class="slds-form-element__label">{!field.fieldDescription}</label> -->
<label class="slds-form-element__label">Description</label>
<!-- <lightning:outputField variant="label-hidden" fieldName="{!field.fieldDescription}"/> -->
</div>
<div class="slds-col slds-size_1-of-12">
<lightning:helptext
content="{!field.fieldHint}" />
</div>
<div class="slds-col slds-size_3-of-12">
<lightning:radioGroup name="radioGroup" options="{! v.Ratings }" value="{! v.value }" type="button"
class="customRadioCls" />
</div>
<div class="slds-col slds-size_4-of-12">
<lightning:textarea name="input3" placeholder="Comments/Remarks for the observation" />
</div>
</div>
Need help on above 2 issue.
Thank you in advance
Need help on above 2 issue.
Thank you in advance
Have you tried displaying just a particular component to see if the scroll bar is being visible or not?
For the second part have you tried it in a larger screen and is the issue being replicated even in larger screen?
If the issuse is not getting replicated in larger screens the issue could be with the options beside which the text editor is being placed.
Regards,
Anutej
Thank you for your reply. I had tried displaying a particular component it did not work.
I tried the below solution which has resolved my scroll issue
- Instead of adding the scrollbar on the child components which are called from parent component code, i added the below tag on each child component
<div class="slds-box slds-p-around_medium slds-scrollable_y" style="height:20rem;width:54rem">
So now i am able to show both child components as scrollable in the Parent component.
For Issue 2, the issue is being replicated on larger screen also. One thing what i observed is if instead of Textarea, i add some other component like radiogroup or lightning outputfield, it does come aligned in one row itself.