How to change the size of Modal in Lightning

Question

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,

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>
        </header>
        <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>
                                </div>
                            </div>
                            <div class="slds-form--inline">
                                <div class="slds-form-element" style="font-size:16px;">
                                    <ui:outputText value="{!v.message}"/>
                                </div>
                            </div>
                    </form>
                </div>
        </div>
        <footer class="slds-modal__footer">
            <lightning:button variant="neutral" 
                              label="Close"
                              onclick="{! c.closeModel }"
                              title="Close"
                              />
        </footer>
    </div>
<div class="slds-backdrop "/>
</aura:if>
<!--###### 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

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">
   .slds-modal__container{ 
     height : auto; width: 80%; max-width: 70vh; 
   } 
   .modal-body{ 
     height : 40vh !important; 
     max-height: 40vh !important; 
   } 
   .slds-modal__footer{ 
     display: inline !important; 
   }
</aura:html>

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!