I'm designing opportunity Edit page with a lightning component using lightning:recordEditForm and Lightning:inputField

   <lightning:recordEditForm recordId="{!v.recordId}"
                                      objectApiName="Opportunity" onsuccess="{!c.handleSuccess}">

 <div class="slds-grid slds-wrap slds-text-align_center custom-container">
              <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">
                <lightning:outputField fieldName="OwnerId" />  </div>
               <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">
                <lightning:outputField fieldName="RecordTypeId" /> </div>

When I'm viewing the output field labels are displaying in different views look at the below pictures for more:

the below image shows the view of lightning application:

enter image description here the below image shows the view of when I'm assigned to the opportunity Edit page:

enter image description here


There is an attribute density for this component Record Edit Form. Its default value is auto whose layout depends on choice of user compact or comfy. This is applicable only in lightning experience.

But in standalone lightning app, it depends on width of viewport. Find it in documentation

If a record form component doesn't detect the Salesforce density setting, the fields display with their labels next to them. If you resize the form container to a narrow width, the fields display with their labels above them.

As the width is more you are seeing label beside field, try to reduce the width by resizing browser, it will adjust above the field.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.