Fix bootstrap modal content size для всех вкладка в нем

У меня есть загрузочный модальный с 3 вкладками в нем. размер модального контента для каждого из вкладок различен. Я хочу установить модальный контент для всех вкладок. Что я должен делать?Fix bootstrap modal content size для всех вкладка в нем

мой код:

<ul id="EditTabs" class="nav nav-tabs " role="tablist"> 
    <li class="active"> 
     <a href="#first" role="tab" data-toggle="tab"> 
      <icon class="fa fa-user" ></icon> مشخصات 
     </a> 
    </li> 
    <li id="ImageEditLiTab"> 
     <a href="#second" role="tab" data-toggle="tab"> 
      <i class="fa fa-picture-o"></i> عکس 
     </a> 
    </li> 
    <li id="LiGoogleMapEditThird"> 
     <a href="#third" role="tab" data-toggle="tab"> 
      <i class="glyphicon glyphicon-map-marker"></i> نقشه 
     </a> 
    </li> 
</ul> 
<!-- Tab panes --> 
<div class="tab-content"> 
    <div class="tab-pane fade active in" id="first"> 

     <!--------- end input texts--------------> 
     <br> 
     <!-- Text input--> 

     <div class="form-group"> 
      <div class="col-md-8 inputGroupContainer"> 
       <div dir="ltr" class="input-group"> 
        <input dir="rtl" id="EditStudentFirstName" name="EditStudentFirstName" placeholder="نام" class="form-control" type="text"> 
        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
       </div> 
      </div> 
      <label for="EditStudentFirstName" class="col-md-3 control-label">نام   </label> 
     </div> 

     <!-- Text input--> 

     <div class="form-group"> 
      <div class="col-md-8 inputGroupContainer"> 
       <div dir="ltr" class="input-group"> 
        <input dir="rtl" id="EditStudentLastName" name="EditStudentLastName" placeholder="نام خانوادگی" class="form-control" type="text"> 
        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
       </div> 
      </div> 
      <label for="EditStudentLastName" class="col-md-3 control-label" >نام خانوادگی   </label> 
     </div> 

     <!-- Text input--> 

     <div class="form-group"> 
      <div class="col-md-8 inputGroupContainer"> 
       <div dir="ltr" class="input-group"> 
        <input dir="rtl" id="EditStudentAddress" name="EditStudentAddress" placeholder="آدرس" class="form-control" type="text"> 
        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span> 
       </div> 
      </div> 
      <label for="EditStudentAddress" class="col-md-3 control-label">آدرس منزل  </label> 
     </div> 

     <!-- Text input--> 
     <div class="form-group"> 

      <div class="col-md-8 inputGroupContainer"> 
       <div dir="ltr" class="input-group"> 
        <input dir="rtl" id="EditStudentZip" name="EditStudentZip" placeholder="کد پستی" class="form-control" type="text"> 
        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span> 
       </div> 
      </div> 
      <label for="EditStudentZip" class="col-md-3 control-label">کد پستی </label> 
     </div> 

     <!-- Text input--> 
     <div class="form-group"> 

      <div class="col-md-8 inputGroupContainer"> 
       <div dir="ltr" class="input-group"> 
        <input dir="rtl" id="EditStudentPhone" name="EditStudentPhone" placeholder=" شماره تلفن منزل" class="form-control" type="text"> 
        <span class="input-group-addon"><i class="glyphicon glyphicon-phone-alt"></i></span> 
       </div> 
      </div> 
      <label for="EditStudentPhone" class="col-md-3 control-label">شماره تلفن منزل </label> 
     </div> 

     <!-- Text input--> 
     <div class="form-group"> 
      <div class="col-md-8 inputGroupContainer"> 
       <div dir="ltr" class="input-group"> 
        <input dir="rtl" id="EditStudentMobile" name="EditStudentMobile" placeholder="شماره موبایل" class="form-control" type="text"> 
        <span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span> 
       </div> 
      </div> 
      <label for="EditStudentMobile" class="col-md-3 control-label">شماره موبایل </label> 
     </div> 


     <!-- Text input--> 
     <div class="form-group"> 
      <div class="col-md-8 inputGroupContainer"> 
       <div dir="ltr" class="input-group"> 
        <input dir="rtl" id="EditStudentUsername" name="EditStudentUsername" placeholder="نام کاربری دانش آموز" class="form-control" type="text"> 
        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
       </div> 
      </div> 
      <label for="EditStudentUsername" class="col-md-3 control-label">نام کاربری دانش آموز  </label> 
     </div> 

     <!-- Text input--> 
     <div class="form-group"> 
      <div class="col-md-8 inputGroupContainer"> 
       <div dir="ltr" class="input-group"> 
        <input dir="rtl" id="EditStudentPass" name="EditStudentPass" placeholder="پسورد دانش آموز" class="form-control" type="text"> 
        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> 
       </div> 
      </div> 
      <label for="EditStudentPass" class="col-md-3 control-label">پسورد دانش آموز </label> 
     </div> 

     <!--------- end input texts--------------> 

    </div><!-- End first Tab--> 
    <div class="tab-pane fade" id="second" dir="ltr"> 

     <form id="imagesubmit2" action="http://79.132.212.50:8080/SchoolServiceWebService/user/photo/set" method="post" enctype="multipart/form-data"> 

      <input id="Adminusername2" hidden type="textbox" name="username" size="45" /> 
      <input id="Adminuserpassword2" hidden type="textbox" name="password" size="45" /> 
      <input id="EditStudentuserid" hidden type="textbox" name="userid" size="45" /> 
      <!-- <input id="file-4" type="file" class="file" size="45" data-upload-url="http://79.132.212.50:8080/SchoolServiceWebService/user/photo/set">--> 

      <!-- <input id="file-4" type="file" name="file" size="45" class="file col-md-6 file2" />--> 

      <input id="input-24" name="file" type="file" multiple size="45" class="file-loading col-md-6 file2"> 

     </form> 

    </div><!-- End second Tab--> 


    <div class="tab-pane fade" id="third"> 

     <br> 
     <br> 
     <br> 
     <label for="Updateaddress_with_google">آدرس را بر روی نقشه مشخص کنید</label> 

     <div class="span11"> 
      <div id="UpdateMap"></div> 
     </div> 
     <br> 
     <br> 
     <div class="row"> 

      <div class="col-md-4"> 
       <button id="Updatebutton_Google_Serach" type="button" class="btn btn-info" >جستجو</button> 
      </div> 
      <div class="col-md-8"> 
       <input type="text" id="Updateaddress_with_google" name="Updateaddress_with_google" placeholder="جستجو" class="form-control" /> 
      </div> 

     </div> 

     <input type="text" hidden id="UpdatelatGoogleMap"> 
     <input type="text" hidden id="UpdatelngGoogleMap"> 
     <br> 
    </div><!-- End third Tab--> 

</div>

размера первой вкладки: размера второй вкладки:

источник

2017-01-25 narges

, где ваш код, который вы пытались? –

@HirenJungi, вопрос был обновление. – narges

Сделать jsfiddle или snippet ... –

См Я обновил свой код теперь он будет работать, как вы хотите.

Оформить заказ, указанный ниже, может решить вашу проблему. и если вы хотите изменить ширину модального на основе ширины использования экрана @media запрос предоставляется CSS

.custom-class-assignedto-modal .modal-dialog { 
 
    width: 50%; 
 
} 
 
.custom-class-assignedto-modal .modal-body { 
 
    height: 400px; 
 
    overflow : auto; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
    <h2>Modal Example</h2> 
 
    <!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade custom-class-assignedto-modal" id="myModal" role="dialog" align="center"> 
 
     <div class="modal-dialog" align="left"> 
 

 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
      <p>Some text in the modal.</p> 
 
      <ul id="EditTabs" class="nav nav-tabs " role="tablist"> 
 
       <li class="active"> 
 
       <a href="#first" role="tab" data-toggle="tab"> 
 
        <icon class="fa fa-user"></icon>مشخصات 
 
       </a> 
 
       </li> 
 
       <li id="ImageEditLiTab"> 
 
       <a href="#second" role="tab" data-toggle="tab"> 
 
        <i class="fa fa-picture-o"></i> عکس 
 
       </a> 
 
       </li> 
 
       <li id="LiGoogleMapEditThird"> 
 
       <a href="#third" role="tab" data-toggle="tab"> 
 
        <i class="glyphicon glyphicon-map-marker"></i> نقشه 
 
       </a> 
 
       </li> 
 
      </ul> 
 
      <!-- Tab panes --> 
 
      <div class="tab-content"> 
 
       <div class="tab-pane fade active in" id="first"> 
 

 
       <!--------- end input texts--------------> 
 
       <br> 
 
       <!-- Text input--> 
 

 
       <div class="form-group"> 
 
        <div class="col-md-8 inputGroupContainer"> 
 
        <div dir="ltr" class="input-group"> 
 
         <input dir="rtl" id="EditStudentFirstName" name="EditStudentFirstName" placeholder="نام" class="form-control" type="text"> 
 
         <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
 
        </div> 
 
        </div> 
 
        <label for="EditStudentFirstName" class="col-md-3 control-label">نام</label> 
 
       </div> 
 

 
       <!-- Text input--> 
 

 
       <div class="form-group"> 
 
        <div class="col-md-8 inputGroupContainer"> 
 
        <div dir="ltr" class="input-group"> 
 
         <input dir="rtl" id="EditStudentLastName" name="EditStudentLastName" placeholder="نام خانوادگی" class="form-control" type="text"> 
 
         <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
 
        </div> 
 
        </div> 
 
        <label for="EditStudentLastName" class="col-md-3 control-label">نام خانوادگی</label> 
 
       </div> 
 

 
       <!-- Text input--> 
 

 
       <div class="form-group"> 
 
        <div class="col-md-8 inputGroupContainer"> 
 
        <div dir="ltr" class="input-group"> 
 
         <input dir="rtl" id="EditStudentAddress" name="EditStudentAddress" placeholder="آدرس" class="form-control" type="text"> 
 
         <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span> 
 
        </div> 
 
        </div> 
 
        <label for="EditStudentAddress" class="col-md-3 control-label">آدرس منزل</label> 
 
       </div> 
 

 
       <!-- Text input--> 
 
       <div class="form-group"> 
 

 
        <div class="col-md-8 inputGroupContainer"> 
 
        <div dir="ltr" class="input-group"> 
 
         <input dir="rtl" id="EditStudentZip" name="EditStudentZip" placeholder="کد پستی" class="form-control" type="text"> 
 
         <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span> 
 
        </div> 
 
        </div> 
 
        <label for="EditStudentZip" class="col-md-3 control-label">کد پستی</label> 
 
       </div> 
 

 
       <!-- Text input--> 
 
       <div class="form-group"> 
 

 
        <div class="col-md-8 inputGroupContainer"> 
 
        <div dir="ltr" class="input-group"> 
 
         <input dir="rtl" id="EditStudentPhone" name="EditStudentPhone" placeholder=" شماره تلفن منزل" class="form-control" type="text"> 
 
         <span class="input-group-addon"><i class="glyphicon glyphicon-phone-alt"></i></span> 
 
        </div> 
 
        </div> 
 
        <label for="EditStudentPhone" class="col-md-3 control-label">شماره تلفن منزل</label> 
 
       </div> 
 

 
       <!-- Text input--> 
 
       <div class="form-group"> 
 
        <div class="col-md-8 inputGroupContainer"> 
 
        <div dir="ltr" class="input-group"> 
 
         <input dir="rtl" id="EditStudentMobile" name="EditStudentMobile" placeholder="شماره موبایل" class="form-control" type="text"> 
 
         <span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span> 
 
        </div> 
 
        </div> 
 
        <label for="EditStudentMobile" class="col-md-3 control-label">شماره موبایل</label> 
 
       </div> 
 

 

 
       <!-- Text input--> 
 
       <div class="form-group"> 
 
        <div class="col-md-8 inputGroupContainer"> 
 
        <div dir="ltr" class="input-group"> 
 
         <input dir="rtl" id="EditStudentUsername" name="EditStudentUsername" placeholder="نام کاربری دانش آموز" class="form-control" type="text"> 
 
         <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
 
        </div> 
 
        </div> 
 
        <label for="EditStudentUsername" class="col-md-3 control-label">نام کاربری دانش آموز</label> 
 
       </div> 
 

 
       <!-- Text input--> 
 
       <div class="form-group"> 
 
        <div class="col-md-8 inputGroupContainer"> 
 
        <div dir="ltr" class="input-group"> 
 
         <input dir="rtl" id="EditStudentPass" name="EditStudentPass" placeholder="پسورد دانش آموز" class="form-control" type="text"> 
 
         <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> 
 
        </div> 
 
        </div> 
 
        <label for="EditStudentPass" class="col-md-3 control-label">پسورد دانش آموز</label> 
 
       </div> 
 

 
       <!--------- end input texts--------------> 
 

 
       </div> 
 
       <!-- End first Tab--> 
 
       <div class="tab-pane fade" id="second" dir="ltr"> 
 

 
       <form id="imagesubmit2" action="http://79.132.212.50:8080/SchoolServiceWebService/user/photo/set" method="post" enctype="multipart/form-data"> 
 

 
        <input id="Adminusername2" hidden type="textbox" name="username" size="45" /> 
 
        <input id="Adminuserpassword2" hidden type="textbox" name="password" size="45" /> 
 
        <input id="EditStudentuserid" hidden type="textbox" name="userid" size="45" /> 
 
        <!-- <input id="file-4" type="file" class="file" size="45" data-upload-url="http://79.132.212.50:8080/SchoolServiceWebService/user/photo/set">--> 
 

 
        <!-- <input id="file-4" type="file" name="file" size="45" class="file col-md-6 file2" />--> 
 

 
        <input id="input-24" name="file" type="file" multiple size="45" class="file-loading col-md-6 file2"> 
 

 
       </form> 
 

 
       </div> 
 
       <!-- End second Tab--> 
 

 

 
       <div class="tab-pane fade" id="third"> 
 

 
       <br> 
 
       <br> 
 
       <br> 
 
       <label for="Updateaddress_with_google">آدرس را بر روی نقشه مشخص کنید</label> 
 

 
       <div class="span11"> 
 
        <div id="UpdateMap"></div> 
 
       </div> 
 
       <br> 
 
       <br> 
 
       <div class="row"> 
 

 
        <div class="col-md-4"> 
 
        <button id="Updatebutton_Google_Serach" type="button" class="btn btn-info">جستجو</button> 
 
        </div> 
 
        <div class="col-md-8"> 
 
        <input type="text" id="Updateaddress_with_google" name="Updateaddress_with_google" placeholder="جستجو" class="form-control" /> 
 
        </div> 
 

 
       </div> 
 

 
       <input type="text" hidden id="UpdatelatGoogleMap"> 
 
       <input type="text" hidden id="UpdatelngGoogleMap"> 
 
       <br> 
 
       </div> 
 
       <!-- End third Tab--> 
 

 
      </div> 
 
      </div> 
 
      <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 

 
    </div> 
 

 

 

 

 
</body> 
 

 
</html>

источник

2017-01-25 11:42:45

i want fix hight – narges

Проверить сейчас Я обновил ответ. –

Fix bootstrap modal content size для всех вкладка в нем

ответ

Смежные вопросы