2017-08-16 70 views
0

我在Bootstrap Modal內有一個文本框;在這裏你可以看到一個輸出例子:Bootstrap Modal內的Textbox維度

Modalwithtextbox

黃色的部分是不是原來的響應的一部分;這是我添加顯示文本框有一個默認的尺寸,這不符合模式的大小。

我的目的是用文本框填充黃色部分;換句話說,我會認爲文本框的大小與模式大小一致。問題是:有沒有辦法執行此操作? 我補充一點,在模式,文本框不是窗體節的一部分,你可以在代碼中看到:

<div id="myModal2" class="modal fade" role="dialog"> 
         <div class="modal-dialog"> 
         <div class="modal-content"> 
           <div class="modal-header"> 
           <button type="button" class="close" data-dismiss="modal">&times;</button> 
           <h4 class="modal-title">Editing Menu</h4> 
           </div> 
           <div class="modal-body"> 
           <textarea id='areaforinfo' readonly></textarea> 
           <form id="updateeventsform2" class="form-horizontal"> 
           <div class="form-group"> 
           <label class="col-sm-2 control-label" 
              for="inputNotes">Notes</label> 
           <div class="col-sm-10"> 
            <input type="text" class="form-control" 
            id="newnote" name ="newnote" placeholder="Put here the note"/> 
           </div> 
           </div> 
           <div class="form-group"> 
           <label for = "type" class = "col-sm-2 control-label">Status</label> 
          <div class = "col-sm-10"> 
          <select class = "form-control" id = "newstatus" name="newstatus"> 
          <option value="open">open</option> 
           <option value="closed">closed</option> 
          </select> 
         </div> 
           </div> 
          </form> 
          </div> 
           </div> 
           <div class="modal-footer"> 
           <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
           <button type="submit" class="btn btn-primary" data-dismiss="modal">Save</button> 
           </div> 
          </div> 
          </div> 

我應該把表格單元的內部的文本框代碼?

回答

0

好的,自己解決。我只需將文本框放入表單中並添加類屬性;最終結果是:

<div class="modal-body"> 
           <form id="updateeventsform2" class="form-horizontal"> 
           <div class="form-group"> 
           <textarea class = "form-control" id='areaforinfo' style="min-width: 100%" readonly></textarea>