How can I update the size of the modal to fit only the size of the text inside it.

This is what it currently looks like, enter image description here

This is the my code for this

<aura:attribute name="recordId" type="Id"/>
<aura:attribute name="message" type="String" default=""/>

<aura:handler event="aura:waiting" action="{!c.waiting}"/>
<aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<aura:attribute name="isOpen" type="boolean" default="True"/>

<aura:if isTrue="{!v.isOpen}">
    <div class="slds-modal__container">
        <header class="slds-modal__header">
            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Submit</h2>
        <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                <div class="slds">
                    <form id="form">
                            <div class="slds-form--inline">
                                <div class="slds-form-element">
                                    <div aura:id="uploading" class="notUploading">
                                        <img src="/img/loading32.gif" alt="sending" class="small-spinner" /> Sending...
                            <div class="slds-form--inline">
                                <div class="slds-form-element" style="font-size:16px;">
                                    <ui:outputText value="{!v.message}"/>
        <footer class="slds-modal__footer">
            <lightning:button variant="neutral" 
                              onclick="{! c.closeModel }"
<div class="slds-backdrop "/>
<!--###### MODAL BOX Part END Here ######-->

Since I used force:lightningQuickActionWithoutHeader to remove the header and created my own, I used modal to replicate the feel of using force:lightningQuickAction but I can't seem to fit the content to the modal.

I need your help guys, Thanks

  • 1
    @sfdcfox - In the original question, it was asked about the Visualforce page. I think we can do it with some CSS adjustments when it comes to the lighting component - sfcure.com/2018/04/01/… Commented Dec 9, 2018 at 9:54
  • 1
    @NavalSharma Please feel free to add this as an answer then; I have reopened the question based on your comment.
    – sfdcfox
    Commented Dec 9, 2018 at 14:28

1 Answer 1


This is something you can do with some amendments in the styling of your modal's container and here is a blog post which you can refer -

After Salesforce Spring ’18 release, Style Tag Not Allowed in Components. You can’t add a tag in component markup or when you dynamically create a component in JavaScript code. This restriction ensures better component encapsulation and prevents component styling interfering with the styling of another component. However, You can use the aura:html to embed CSS to control the parent container.

<aura:html tag="style">
     height : auto; width: 80%; max-width: 70vh; 
     height : 40vh !important; 
     max-height: 40vh !important; 
     display: inline !important; 

Note: You can update the given width and height as per your requirement.

Here is the link to the blog written by me which explains the same -

How to recreate modal component for force:lightningQuickActionWithoutHeader

Let me know if you need any further help!

  • 3
    Please don't post link-only answers. Users should not have to navigate away to find a solution. Additionally, this is your blog, and you should disclose that affiliation to avoid being flagged as spam.
    – David Reed
    Commented Dec 10, 2018 at 12:40
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
    – David Reed
    Commented Dec 10, 2018 at 12:40
  • 2
    I did not downvote your answer. I reviewed it in the answer review queue.
    – David Reed
    Commented Dec 10, 2018 at 13:11
  • 2
    @Naval Sharma, please do not request answer upvotes, it is not considered polite. Thanks =)
    – glls
    Commented Dec 10, 2018 at 14:24
  • 2
    @NavalSharma Your account is nearly two years old. You are not new here. And many people who are new are able to follow the guidelines well from the get go. The tour is pretty good at explaining how things work, as well as How to Ask and How to Answer.
    – Adrian Larson
    Commented Dec 10, 2018 at 14:53

You must log in to answer this question.

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