Fix Bootstrap Modal Inhalt Größe für alle Registerkarte von ihm

Ich habe ein Bootstrap-modal mit 3 Registerkarte drin. Die Größe des modalen Inhalts für jede Registerkarte ist unterschiedlich. Ich möchte den modalen Inhalt für alle Tabs korrigieren. was muss ich tun?Fix Bootstrap Modal Inhalt Größe für alle Registerkarte von ihm

mein Code:

<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>

Größe der ersten Registerkarte: Größe der zweiten Reiter:

Quelle

2017-01-25 narges

wo Sie den Code, den Sie versucht? –

@HirenJungi, Frage wurde aktualisiert. – narges

Machen Sie eine jsfiddle oder schnipsel ... –

Siehe Ich habe meinen Code aktualisiert jetzt wird es funktionieren, wie Sie wollen.

Checkout-Code unten angegeben kann Ihr Problem lösen. und wenn Sie Breite von modalen ändern basierend wollen auf die Breite der Bildschirm Verwendung @media Abfrage zur Verfügung gestellt von 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>

Quelle

2017-01-25 11:42:45

ich möchte fixe höhe – narges

Jetzt prüfen Ich habe die Antwort aktualisiert. –

Fix Bootstrap Modal Inhalt Größe für alle Registerkarte von ihm

Antwort

Verwandte Themen