I am trying to display a record using lightning:recordviewform and using slds grid inside it to format columns.

It looks like below when I am using slds-size_3_of_12 When Using slds grid

As you can see, there is still plenty of space left, and it doesn't auto-adjust. Also, it doesn't display label on top and field value below it, as I wanted.

But When I drag and make browser's window smaller, it looks perfect.

Like below,

enter image description here

Any Idea, why CSS overflows like this in fullsize browser window, and make standard component pretty much useless if I have many fields?

Any help will be highly appreciated.

Below is the relevant part of aura markup.

<lightning:layout multipleRows="true">
    <aura:iteration items="{! v.campaignLineItemsWrp }" var="lineItemWrp" indexVar="index">
        <lightning:layoutItem padding="around-small" size="12">
            <div id="tile" class="slds-box">
                <lightning:tile label="{!lineItemWrp.campaignLineItem.Name}">
                    <lightning:recordViewForm recordId="{!lineItemWrp.campaignLineItem.Name.Id}" objectApiName="Obj__c">
                        <div class="slds-grid slds-wrap slds-gutters slds-grid_align-space">
                            <div class="slds-col form-group slds-float_left slds-size_4-of-12">
                                    <lightning:outputField class="slds-form-element_stacked" fieldName="Name" />

Were you able to solve this?

I had a similar issue when trying to display the label on top and the value below, and I was able to solve it using the new attribute density for the lightning:recordViewForm by setting it as comfy.

Source: https://releasenotes.docs.salesforce.com/en-us/summer19/release-notes/rn_aura_components.htm

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.