Как текстовые поля в модальном с помощью таблицы - PullRequest
Новая
       7

Как текстовые поля в модальном с помощью таблицы

0 голосов
/ 04 июня 2018

Я разработал модал.Который содержит текстовые поля.В первом ряду есть два текстовых поля, а в колонке есть кнопка «Добавить еще».А во втором ряду три текстовых поля и следующие строки одинаковы. В мобильном представлении содержимое перемещается из поля.Мне нужно показать текстовые поля в модальном.пожалуйста помогите 

<!-- Modal -->
 <div class="modal fade" id="myModal" role="dialog">
 <div class="modal-dialog">
 <!-- Modal content-->
 <div class="modal-content">
 <div class="modal-body">
 <div class="container">
 <div class="row">
 <div class="col-md-6">		
 <div class="panel-body">
	<div class="panel panel-default">
	<button type="button" class="close" data-dismiss="modal">
	<font color="black">  <a href="hrtoolkit.html"  style="color:darkred">
 <span  style="color:darkred;">&times;</span></a></font></button>
  <div class="form-body">
            <label class=" col-sm-4">Edit &nbsp;&nbsp; View &nbsp;&nbsp; Save</label>
			<br /><br />
								<table id="table1">
									
									<tbody>
										
										<tr>
											<td></td>
											<td ><input  type="text" placeholder="10th"/></td>
											<td > <input  type="text" placeholder="Degree" /></td>
											<td > <button type="button" class="btn btn-default "
													data-toggle="collapse" data-target="#filter-panel"
													style="font-size: 9px; background-color: #ccc; font-weight: bold;">Add
													Another</button>
											</td>					
										</tr>	
									
										
										<tr>
										<td >Stream<input  type="text" placeholder="Stream"/></td>
											<td > Institution<input  type="text" placeholder="Institution" /></td>
												<td >Yr of Passing <input  type="text" placeholder="Yr of Passing" /></td>
										</div>		
										</tr>

										<tr>
										<td >State<input  type="text" placeholder="State"/></td>
											<td >Country <input  type="text" placeholder="Country" /></td>
												<td > <input  type="file" /></td>
										</div>		
										</tr>
									
									</tbody>
								</table>
							
						</div>
					</div>
				</div>				
			</div>
		</div>
	</div>

</div>			
			
			
        </div>
        
      </div>
      
    </div>
  </div>

1 Ответ

0 голосов
/ 04 июня 2018

Я сделал это для вас 

.form-body {
  overflow-x: scroll;
}

table tbody tr td {
  padding: 0 10px;
}
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-body">
        <div class="">
          <div class="row">
            <div class="col-md-6">
              <div class="panel-body">
                <div class="panel panel-default">
                  <button type="button" class="close" data-dismiss="modal">
                                        <font color="black">  <a href="hrtoolkit.html"  style="color:darkred">
 <span  style="color:darkred;">&times;</span></a></font></button>
                  <div class="form-body">
                    <label class=" col-sm-4">Edit &nbsp;&nbsp; View &nbsp;&nbsp; Save</label>
                    <br />
                    <br />
                    <table id="table1">

                      <tbody>

                        <tr>
                          <td></td>
                          <td>
                            <input type="text" placeholder="10th" />
                          </td>
                          <td>
                            <input type="text" placeholder="Degree" />
                          </td>
                          <td>
                            <button type="button" class="btn btn-default " data-toggle="collapse" data-target="#filter-panel" style="font-size: 9px; background-color: #ccc; font-weight: bold;">Add Another
                                                        </button>
                          </td>
                        </tr>

                        <tr>
                          <td>Stream
                            <input type="text" placeholder="Stream" />
                          </td>
                          <td> Institution
                            <input type="text" placeholder="Institution" />
                          </td>
                          <td>Yr of Passing
                            <input type="text" placeholder="Yr of Passing" />
                          </td>
                        </tr>

                        <tr>
                          <td>State
                            <input type="text" placeholder="State" />
                          </td>
                          <td>Country
                            <input type="text" placeholder="Country" />
                          </td>
                          <td>
                            <input type="file" />
                          </td>
                        </tr>

                      </tbody>
                    </table>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>

  </div>

</div>
...