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>
  • can you share the code? – Mohith Shrivastava Jul 23 '17 at 14:03
  • Added the code. – Brav Jul 23 '17 at 17:33
  • 2
    you can put height for text area so it will automatically increase height of modal – Himanshu Jul 25 '17 at 3:09

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

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.