2

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

1 Answer 1

2

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

You must log in to answer this question.

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