0

[![enter image description here][1]][1]Here i am trying to show the field names on top and bottom field values. But some how it is having issue with alignment. Can someone suggest what is the issue here.

Component.JS 

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" controller = " CustomController" >
<aura:attribute name="brokerFields" type="String[]" default="Name,Customer_ID__c,Phone,Industry,Type"/>
<aura:attribute name="field1set" type="String[]" default="field0,filed1,field2,field3"/>
<aura:attribute name="recordid1" type="id"  />
<aura:attribute name="ContactList" type="Contact[]" />
<aura:attribute name="mycolumns" type="List"/>

--> 

            </div>
        </lightning:recordForm>
 <!--   </p> -->
</lightning:card>

Thank you in advance.

Improve this question
4
  • The most likely explanation its something to do with the inbuilt styling of either lightning:card or lightning:recordForm. I would advise inspecting the html in chrome and turning off css properties related to those built in lightning cmps.
    – Calvin OKeefe
    Commented Feb 18, 2020 at 18:41
  • Hi @CalvinOKeefe, I tried with inspecting also. But it did not figured out anywhere.
    – user78027
    Commented Feb 18, 2020 at 19:00
  • Its possible that the wrapper you are putting it in is too small for 5 columns, do you need to display all 5 columns on the same line?
    – Calvin OKeefe
    Commented Feb 18, 2020 at 19:14
  • Yes, I want to display all 5 in same columns @calvin
    – user78027
    Commented Feb 18, 2020 at 19:17

1 Answer 1

Reset to default
1

I have replicated your issue in the builder screen (wide section):

enter image description here

In the builder on the narrow section it actually displays well:

enter image description here

However once I was actually on the full page after saving it displayed properly (wide section)

enter image description here

The narrow section on full view also displays as it does in the builder.

Mobile also appears to work

Is your image from the builder or actually viewing the page outside of the builder.

here is the component I used without any additional modifications:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="fields" type="String[]" default="['Name','AnnualRevenue','Industry','Phone','BillingStreet']" />
    <lightning:card title="Member basic info">
        <lightning:recordForm
            recordId=""
            objectApiName="Account"
            mode="readonly"
            fields="{!v.fields}"
            columns="5"
        />

    </lightning:card>
</aura:component>

here is the responsive view:

enter image description here

Seems like a css issue (bug or something) in the builder only (pending additional information from you)

Improve this answer

You must log in to answer this question.