+ Start a Discussion

lightning field value is overflowing

Hi All,

Whenever we are giving input to comment field ,it is overflowing the value as below screenshot.
User-added image
below is lightning code used for this.Can someone suggest me what is causing this issue ?

<div class="slds-section slds-is-open">           
               <div class="slds-grid slds-wrap slds-grid--pull-padded">                                                               
                              <div class="slds-p-horizontal--small slds-size--1-of-2">
                                             <div class="slds-form-element slds-hint-parent slds-has-divider--bottom slds-p-around--x-small hasDiv">
                                                            <label class="slds-form-element__label">comment</label>
                                                            <div class="slds-form-element__control" style="min-height: 18px;">
                                                                           <aura:if isTrue="{!v.isEditPage}">
                                                                                          <ui:inputText class="slds-output" value="{!v.Oppty.Comment__c}" maxlength="100"/>
                                                                                          <aura:set attribute="else">
                                                                                                         <ui:outputText class="slds-output" value="{!v.Oppty.Comment__c}" />
                                                                                                         <span class="slds-float--right litIcon editIcon" onclick="{!c.changeEditLayout}">
                                                                                                                        <lightning:icon iconName="utility:edit" size="xx-small" alternativeText="Indicates approval"/>

Danish HodaDanish Hoda
Hi Subodh,
Try using lightning:textarea
Ajay K DubediAjay K Dubedi
Hi Subodh,

Use this div tag for wrapping content when it is too large

<div class="slds-grid slds-wrap">

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Ajay Dubedi