How to format the lightning-output-field in a grid with LWC?

Question

I'm trying to display 2 columns of data in a LWC using . They are displaying ok (ideally I would want the labels not wrapping) but when I resize the browser window, some of the columns can jump to the right.

Looking good :-

Bottom left field jumps right when browser window made smaller :-

Middle left field jumps right when browser window made even smaller :-

My html looks like

Dia Shrinidhi · Accepted Answer

To format the lightning-output-field in a grid with LWC, don't use
here; this causes odd behaviour in conjunction with SLDS styles. Each element needs to be in its own layout container:

Note that the default grid goes left to right, so we interleave the left and right columns here.
You can also use lightning-layout and lightning-layout-item instead of directly using div elements.

How to format the lightning-output-field in a grid with LWC?

About this question

Your answer

1 Answer

More Salesforce discussions

Learn & Explore

Salesforce Tutorials

Salesforce Interview Q&A

Latest Salesforce Blogs

Want answers to more Salesforce questions?

Stay in the loop — it’s free

You’re on the list!