How to format the lightning-output-field in a grid with LWC?
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
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.