I am having a problem with a lightning-record-form within a modal. It all works as expected except that the fields and labels are squished up against the left-side of the dialog. I can't figure out why. I have tried changing the density attribute (comfy or compact) and it does change whether the label appears above or to right of the field but everything remains squished up against the left of the modal.

labels and fields squished to the left of the modal

Here is my simple html:


   <lightning-button variant="brand"
       label="Add New Product Line Item"
       title="Add New Product Line Item"

   <template if:true={showModal}>
      <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
         <div class="slds-modal__container">
             <!-- Modal/Popup Box LWC header here -->
             <header class="slds-modal__header">
                 <!--<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                     <lightning-icon icon-name="utility:close"
                         size="small" ></lightning-icon>
                     <span class="slds-assistive-text">Close</span>
                 <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Create New Product and Add a Quote Line Item</h2>
             <!-- Modal/Popup Box LWC body starts here -->
             <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
     <div class="slds-backdrop slds-backdrop_open"></div>

And here is my (not yet finished but working) javascript file:

import { LightningElement,track } from 'lwc';

import DESCRIPTION_FIELD from '@salesforce/schema/Product2.Description';
import STOCK_KEEPING_UNIT_FIELD from '@salesforce/schema/Product2.StockKeepingUnit';

export default class NewProductAddToQuoteLineModal extends LightningElement {
     @track showModal = false;
    /* javaScipt functions start */ 
    openModal() {    
        console.log('opening the model now');
        this.showModal = true;
    closeModal() {
        console.log('closing the model now');
        this.showModal = false;

    handleCancel() {
        console.log('handling cancel now');

    handleSuccess() {
        console.log('handling success now');
        // do the save   

    handleError() {
        console.log('handling error now');
        // handle error
    /* javaScipt functions end */ 
  • Hi @Michael Batchelder, I deployed your code to my dev org and it worked just fine except the missing MSRP_FIELD error - I understand its still work in progress. If you are using local lwc server for development, it can sometimes be inconsistent with the actual behaviour of the component in an org. This is what I see in my org: ibb.co/cCwL9qj
    – Naga
    Aug 27, 2020 at 5:47
  • Thanks, Naga. I will try deploying it out to our dev org. Aug 27, 2020 at 16:43
  • Naga, deploying to our dev org did indeed fix the issue! Thanks again. Aug 27, 2020 at 22:00
  • Good to know. Welcome to Salesforce StackExchange.
    – Naga
    Aug 27, 2020 at 22:48

1 Answer 1


Per Naga's comment above, I tried deploying to our dev org and it fixed the issue. I guess the local lwc server is just inconsistent in some cases.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.