function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Andee Weir 17Andee Weir 17 

Formatting of lightning-output-field in grid

Hi,

I'm trying to display 2 columns of data in a LWC using <lightning-output-field>.  They are displaying ok (ideally I would want the labels not wrapping) but when I resize the browser window some of the columns jump too far to the right. 

Looking Ok :- Looking ok - ideally labels shouldn't be wrapping
Not so good when browser size made smaller :-
Preference Centre label aligning incorrectly
& things continue to move around if I reduce the browser size further :-
Last Client Approval moved
My html looking like :- 
<template>
	<template if:true={readmode}>
		<div class="centerButtonDiv">
			<lightning-button variant="brand" label="Update Preferences" onclick={customShowModalPopup}>
			</lightning-button>
		</div>
		<lightning-record-view-form record-id={recordId} object-api-name={ObjectName}>
			
			<div class="slds-grid slds-gutters">
				<div class="slds-size_1-of-2">
					<lightning-output-field field-name="Preferences_Are_Client_Approved__c"></lightning-output-field><br/>
					<lightning-output-field field-name="Last_Client_Approval_Given_By__c"></lightning-output-field><br/>
					<lightning-output-field field-name="Preference_Centre_Visited__c"></lightning-output-field><br/>
				</div>

				<div class="slds-size_1-of-2">
					<lightning-output-field field-name="Date_of_Last_Client_Approval__c"></lightning-output-field><br/>
					<lightning-output-field field-name="HasOptedOutOfEmail"></lightning-output-field><br/>
					<lightning-output-field field-name="Do_not_email__c"></lightning-output-field><br/>
				</div>
			</div>
		</lightning-record-view-form>
	</template>
</template>
The related css file has no relevant code.

Thanks in advance for any help that can be offered. 
ravi soniravi soni
hi Andee Weir 17,
you can try lightning:layout for achieve this.Try below Html code.I think it would help you to achieve this requirment. 
<template>
	<template if:true={readmode}>
		<div class="centerButtonDiv">
			<lightning-button variant="brand" label="Update Preferences" onclick={customShowModalPopup}>
			</lightning-button>
		</div>
		<lightning-record-view-form record-id={recordId} object-api-name={ObjectName}>
		<lightning:layout>
		<lightning:layoutItem size="6">
			
			<!--<div class="slds-grid slds-gutters">-->
				<!--<div class="slds-size_1-of-2">-->
					<lightning-output-field field-name="Preferences_Are_Client_Approved__c"></lightning-output-field><br/>
					<lightning-output-field field-name="Last_Client_Approval_Given_By__c"></lightning-output-field><br/>
					<lightning-output-field field-name="Preference_Centre_Visited__c"></lightning-output-field><br/>
				
				</lightning:layoutItem>
				<!--</div>

				<div class="slds-size_1-of-2">-->
				<lightning:layoutItem size="6">
					<lightning-output-field field-name="Date_of_Last_Client_Approval__c"></lightning-output-field><br/>
					<lightning-output-field field-name="HasOptedOutOfEmail"></lightning-output-field><br/>
					<lightning-output-field field-name="Do_not_email__c"></lightning-output-field><br/>
				<!--</div>
			</div>-->
			</lightning:layoutItem>
			</lightning:layout>
		</lightning-record-view-form>
	</template>
</template>
don't forget to mark it as best answer.
Thank you
 
Andee Weir 17Andee Weir 17
Thanks for responding.  Unfortunately I end up with one column containing the 6 fields rather than 2 columns containing 3 each.  I will explore Layout & LayoutItem some more though.

6 field in 1 column rather than 3 fields in each of 2 columns
Andee Weir 17Andee Weir 17
got a solution from another post I made :-
  
<div class="slds-grid slds-gutters slds-wrap">
    <div class="slds-size_1-of-2">
        <lightning-output-field field-name="Preferences_Are_Client_Approved__c"></lightning-output-field>
    </div>
    <div class="slds-size_1-of-2">
        <lightning-output-field field-name="Date_of_Last_Client_Approval__c"></lightning-output-field>
    </div>
    <div class="slds-size_1-of-2">
        <lightning-output-field field-name="Last_Client_Approval_Given_By__c"></lightning-output-field>
    </div>
    <div class="slds-size_1-of-2">
        <lightning-output-field field-name="HasOptedOutOfEmail"></lightning-output-field>
    </div>
    <div class="slds-size_1-of-2">
        <lightning-output-field field-name="Preference_Centre_Visited__c"></lightning-output-field>
    </div>
    <div class="slds-size_1-of-2">
        <lightning-output-field field-name="Do_not_email__c"></lightning-output-field>
    </div>
</div>