1

I have a similar problem, yet I'm using the lightningModal. I also checked the element and it does have the slds-modal. I would really appreciate any idea, or if you could point me out to my error.

from the modal component:

<template>
    <lightning-modal-header label={header} ></lightning-modal-header>
    <lightning-modal-body> Content: {content} </lightning-modal-body>
    <lightning-modal-footer>
        <lightning-button
                label="Close"
                onclick={handleClose}
        ></lightning-button>
    </lightning-modal-footer>
</template>

The class:

import {api} from 'lwc';
import LightningModal from 'lightning/modal';
export default class IntegrityCheckerModalPage extends LightningModal {
    @api header ='my header';
    @api content = 'my content';

    // Return a custom value when the modal is closed with the Close button.
    // If no value is returned in the close method, then undefined is returned(Same as closing with the X button).
    handleClose() {
        this.close('return value');
    }
}

The datamodel's code:

  1. The import:

    import IntegrityCheckerModalPage from 'c/integrityCheckerModalPage';

  2. The event of the row action:

           case 'moreInfo':
            IntegrityCheckerModalPage.open({
                label : 'hello label',
                role : 'dialog',
                size: 'medium',
                description: 'MiscModal displays the message in a popup',
                header: 'header example ' , 
                content: 'my content'
            }).then((result) => {

                console.log('Modal returned:' + result);
            });

    break;

I would appreciate any input. I tried disabling the 'Lightning Web Security' and reduce the api version of the 'Lightning Locker API Version' but it didn't change anything.

This is how it looks like...

enter image description here

The web element: enter image description here

Improve this question
2
  • "I have a similar problem" - similar like which problem? I've just tested your code and I get a perfectly normal modal. I have no clue where this "Cancel and close" image is from, but it's not in the source code that you provided.
    – Felix van Hove
    Commented Oct 31, 2023 at 18:19
  • sorry, I missed pasting a similar problem post : salesforce.stackexchange.com/questions/371413/…
    – Ronit Shoshani
    Commented Oct 31, 2023 at 19:08

1 Answer 1

Reset to default
2

I'm assuming this is in a lightning-out app/a LWC displayed via a visualforce page. If that's the case, add <apex:slds /> to the <head> tag of your visualforce page. That fixed it for me

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_slds.htm

Edit:

This part of the documentation is important to getting it to work:

Include <apex:slds /> in a Visualforce page to use Lightning Design System stylesheets in the page.

In general, the Lightning Design System is already scoped. Visualforce pages that have showHeader="true" already apply a scoping CSS class slds-scope to the content of the page, so that your content is styled with the Lightning Design System. Additionally, pages with showHeader="false" and applyBodyTag="true" have the scoping class added to the element in the page. If you set applyBodyTag or applyHtmlTag to false, however, you must include the scoping class slds-scope. Within the scoping class, your markup can reference Lightning Design System styles and assets.

Improve this answer

You must log in to answer this question.

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