[SalesForce] Increase the Lightning pop up modal size by height

I have created a lightning pop up modal on click of a button. I can change the width of the pop up but is there a way I can increase the size by height by means of css or any other? The text area is too small now.

enter image description here

My Component

     <div class="slds-tabs_default">
      <ul class="slds-tabs_default__nav" role="tablist">
        <li class="slds-tabs_default__item slds-is-active" title="Item One" role="presentation"><a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" id="tab-default-1__item">Write your Value Statement</a></li>
        <li class="slds-tabs_default__item" title="Item Two" role="presentation"><a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-2" id="tab-default-2__item">Form your Value Proposition</a></li>
      </ul>
    <div class="slds-box">
      <div id="tab-default-1" class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">
         <div class="slds-grid slds-scrollable slds-grid--pull-padded ">
              <div class="slds-p-horizontal--small  slds-medium-size--1-of-6 slds-large-size--3-of-12">
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="textarea-id-01">Critical Business Issues</label>
                            <div class="slds-form-element__control">
                              <textarea id="textarea-id-01" class="slds-textarea" placeholder="Placeholder Text"></textarea>
                            </div>
                        </div>
              </div>

                <div class="slds-p-horizontal--small  slds-medium-size--1-of-6 slds-large-size--3-of-12">
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="textarea-id-01">Area Of Improvement</label>
                            <div class="slds-form-element__control">
                              <textarea id="textarea-id-01" class="slds-textarea" placeholder="Placeholder Text"></textarea>
                            </div>
                        </div>
                </div>

                 <div class="slds-p-horizontal--small  slds-medium-size--1-of-6 slds-large-size--3-of-12">
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="textarea-id-01">Business Impact</label>
                            <div class="slds-form-element__control">
                              <textarea id="textarea-id-01" class="slds-textarea" placeholder="Placeholder Text"></textarea>
                            </div>
                        </div>
                 </div>
                 <div class="slds-p-horizontal--small  slds-medium-size--1-of-6 slds-large-size--3-of-12">
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="textarea-id-01">Credibility</label>
                            <div class="slds-form-element__control">
                              <textarea id="textarea-id-01" class="slds-textarea" placeholder="Placeholder Text"></textarea>
                            </div>
                        </div>
                  </div>
        </div>
                <div class="slds-form-element ">
                    <label class="slds-form-element__label slds-align_absolute-center" for="textarea-id-01">Value Statement</label>
                    <div class="slds-form-element__control">
                      <textarea id="textarea-id-01" class="slds-textarea" placeholder="Placeholder Text"></textarea>
                    </div>
                </div>

      </div>
    </div>
      <div id="tab-default-2" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">
        Item Two Content
      </div>
  </div>

  <div aura:id="buttonsDiv" class="slds-button-group slds-align--absolute-center" role="group" style="border-bottom: 1px solid gainsboro;">   
    <button type="button" aura:id="nextButton" class="slds-button slds-button--neutral slds-button slds-button--brand" onclick="" >Next</button>
  </div> 

  <div class="slds-button-group" role="group" style="float: right;border-top: 1px solid gainsboro;">
    <button type="button" aura:id="exitButton" class="slds-button slds-button--neutral slds-button--destructive" onclick="{!c.hideModal}">Exit</button>
  </div>

Best Answer

Click on the action you created and increase the height by there Click on the action you created and increase the height by there

Related Topic