0

I am using the lightning:overlayLibrary to display a modal. The header and footer are coming through fine but the header is not displaying as expected.

When I pass the title through the header object there is no heading tag. It is just text in the modal header class.

Has anyone come across this issue?

Is there a way to wrap the header text in a tag?

Here is my controller which is creating the modal.

({
  handleShowModal: function(component, evt, helper) {
    var modalBody;
    var modalFooter;
    $A.createComponents([['c:dfd_modalContent', {}], ['c:dfd_modalFooter', {}]], function(components, status) {
      if (status === 'SUCCESS') {
        modalBody = components[0];
        modalFooter = components[1];
        component.find('overlayLib').showCustomModal({
          header: 'Expedite your order',
          body: modalBody,
          footer: modalFooter,
          showCloseButton: true,
          cssClass: 'mymodal, slds-modal__footer_directional'
        });
      }
    });
  }
});
1

I used aura:html to generate the header tag, not sure if this is the best way, but works.

Psuedo code would looks as follows:

({
    handleShowModal: function(component, evt, helper) {
        var modalHeader;
        var modalBody;
        var modalFooter;
        $A.createComponents(
            [
                ["aura:html", {
                    "tag": "h2",
                    "body": "Expedite your order",
                    "HTMLAttributes": { 
                        "class": "slds-text-heading_medium slds-hyphenate" 
                    }
                }],
                ['c:dfd_modalContent', {}], 
                ['c:dfd_modalFooter', {}]
            ], 
            function(components, status) {
                if (status === 'SUCCESS') {
                    modalHeader = components[0]
                    modalBody = components[1];
                    modalFooter = components[2];
                    component.find('overlayLib').showCustomModal({
                        header: modalHeader,
                        body: modalBody,
                        footer: modalFooter,
                        showCloseButton: true,
                        cssClass: 'mymodal, slds-modal__footer_directional'
                    });
                }
            });
    }
});
  • Thanks @Raul that is a great solution. Is lightweight and works perfectly. – F.E.D. Apr 23 '18 at 21:18

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.