2

I have created a Lightning Web Component in a sandbox org (Summer 23 patch 10.1) and deployed it to my production org (Summer 23 patch 9.6) via a changeset. In the sandbox org, the layout looks the way I want. But in production, many things are the wrong size and the layout is pretty unusable.

It looks like this in the sandbox org (partial):

enter image description here

And it looks like this in production:

enter image description here

Looking in the browser's inspector, I can see that the css rules differ (of course), and that is the cause. Is there some way to determine what css will be applied in production vs a sandbox org? Or some other way to get these looking the same so I can continue to develop?

I noticed this morning that the markup in my component is resulting in different output on sandbox vs production. specifically, lightning-output-field is creating elements with a class of slds-form-element_stacked in sandbox, but the same output field in production is creating elements with a class of slds-form-element_horizontal in production. If I manually change the classes in production (using browsers inspector) to match what's in sandbox, things start to look correct. I don't see anything in the LWC documentation about how to specifically control this or why it should differ between a sandbox and production org running nearly the same release.

Here is the template. There is no custom css file.

<template>
    <lightning-quick-action-panel header="Verify Fix LWC">
        <lightning-record-edit-form
            record-id={recordId}
            object-api-name={objectApiName}
            onsubmit={handleSubmit}
            onsuccess={handleSuccess}
        >
            <template lwc:if={theCase}>
                <div class="c-container">
                    <lightning-layout>
                        <lightning-layout-item>
                            <lightning-output-field field-name="WarrantyStatus__c"></lightning-output-field>
                        </lightning-layout-item>
                        <lightning-layout-item>
                            <lightning-input-field disabled field-name="Status"></lightning-input-field>
                        </lightning-layout-item>
                    </lightning-layout>
                </div>

                <lightning-input-field field-name="Repair_Description__c"></lightning-input-field>
                <lightning-layout vertical-align="end">
                    <lightning-layout-item>
                        <lightning-input-field field-name="Repair_Labor_Cost__c"></lightning-input-field>
                    </lightning-layout-item>
                    <lightning-layout-item padding="around-small">
                        <template lwc:if={billingIsReedsburg}>
                            <span class="slds-form-element__label" title="US Labor">
                                Standard US Labor
                            </span>
                            <div class="slds-form-element__control">
                                <lightning-formatted-number value={laborUS} format-style="currency" class="slds-form-element__static"></lightning-formatted-number>
                            </div>
                        </template>
                        <template lwc:elseif={billingIsWatford}>
                            <span class="slds-form-element__label" title="UK Labor">
                                Standard UK Labor
                            </span>
                            <div class="slds-form-element__control">
                                <lightning-formatted-number value={laborUK} format-style="currency" class="slds-form-element__static"></lightning-formatted-number>
                            </div>
                        </template>
                    </lightning-layout-item>
                    <lightning-layout-item padding="around-small">
                        <span class="slds-text-color_destructive">{laborChargeMessage}</span>
                    </lightning-layout-item>
                </lightning-layout>
                <lightning-input-field field-name="Repairpartscost__c"></lightning-input-field>
                <lightning-input type="checkbox" label="Diverted" class="divertedCB slds-m-left_xx-small slds-m-bottom_small" onchange={handleDivertedCBChange} checked={isDiverted}></lightning-input>
                <lightning-button variant="brand" class="slds-m-left_xx-small" label="Save" type="submit"></lightning-button>
            </template>
            <template lwc:if={error}>
                <p>{error}</p>
            </template>
        </lightning-record-edit-form>
    </lightning-quick-action-panel>
</template>

Edit: It seems that it is related to compact vs comfy display density. Setting density="compact" on the lightning-record-edit-form causes it to look incorrect in sandbox, in the same way that it looks incorrect in production. When I set it explicitly to comfy and deploy, it looks correct in sandbox, but is still incorrect in production. So it seems like it is getting forced to compact in production.

3
  • Hi and welcome to SFSE. Please edit your question to include the template for your LWC, along with any CSS you have for it.
    – Phil W
    Commented Jun 22, 2023 at 19:11
  • 1
    Is your display density different? ie. Comfy vs Compact?
    – Nick C
    Commented Jun 23, 2023 at 2:05
  • @NickCook Setting density="compact" on the lightning-record-edit-form causes it to look incorrect in sandbox, in the same way that it looks incorrect in production. When I set it explicitly to comfy and deploy, it looks correct in sandbox, but is still incorrect in production. So it seems like it is getting forced to compact in production.
    – Nic Stage
    Commented Jun 26, 2023 at 20:39

1 Answer 1

3

This is related to the display density in Salesforce. My user-setting display density was comfy in the sandbox, but compact in production. The compact density was making it look wrong. the user-defined density setting seems to override the density set in the lightning web component (At least when it's set on lightning-record-edit-form).

I haven't found a workaround so far other than having users set the display density to comfy. There likely is a solution in the way that the lightning web component is composed, that I just haven't learned yet. Regardless, this was the cause of my issue.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .