Динамический размер модального в bootstrap

Question

Я новичок в этой области, поэтому я объясню вам, чего я пытаюсь достичь. На моей веб-странице я хочу, чтобы при нажатии кнопки отображается всплывающая карта, где я должен заполнить некоторую информацию. Я использую bootstrap в моем текущем проекте. Так что я нашел до сих пор использование модального. Поэтому, когда карта всплывает, есть поля для заполнения (простые строки) и дата для выбора. Идя к коду до сих пор у меня есть:

<!-- Trigger the modal with a button --> 
<button type="button" class="btn btn-lg btn-warning addButton" data-toggle="modal" data-target="#myModal">New Employee</button> 
<!-- Modal --> 
<div id="myModal" class="modal fade" role="dialog"> 
     <div class="modal-dialog modal-sm"> 
      <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">New FRISS employee</h4> 
       </div> 
       <div class="modal-body"> 

        <input type="text" class="form-control insertInfo" placeholder="Name" /> 
        <input type="text" class="form-control insertInfo" placeholder="Surname" /> 
        <input type="text" class="form-control insertInfo" placeholder="Date of birth" /> 
        <input type="text" class="form-control insertInfo" placeholder="Role" /> 
        <input type="text" class="form-control insertInfo" placeholder="Email address" /> 



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

     </div> 
    </div> 

Первая проблема на данный момент является то, что я хотел бы изменить ширину модального (который является слишком большим). После этого я не хочу строки как дата, но выбор даты и снова я нашел через бутстрап этого фрагмент коды:

<div class="container"> 
    <div class="row"> 
     <div class='col-sm-6'> 
      <div class="form-group"> 
       <div class='input-group date' id='datetimepicker1'> 
        <input type='text' class="form-control" /> 
        <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
      </div> 
     </div> 
     <script type="text/javascript"> 
      $(function() { 
       $('#datetimepicker1').datetimepicker(); 
      }); 
     </script> 
    </div> 
</div> 

К сожалению, если я использую его, все в модальном перемешиваются без больше порядка и Мне не удается держать все в чистоте и приказано. Не могли бы вы мне помочь? Заранее спасибо

Answer 1

Либо вы еще не добавили ссылки на cpd ccd datepicker, либо я думаю, что вы копируете и вставляете весь код даты, вместо даты ввода.

Вам не нужно скопировать весь код контейнера DIV только код из

<div class='input-group date' id='datetimepicker1'> 

Также убедитесь, что вы добавили в DateTimePicker CSS и JS ссылки файлов в вашей голове тега.

Ниже приведен пример использования кода. Проверьте теги ссылок и сценариев вверху и поместите их в свой код в том же порядке.

http://codepen.io/Nasir_T/pen/ALNkaK

Кроме того, чтобы настроить ширину модального дел. Просто добавьте класс bootstrap по умолчанию .modal-content { в ваш пользовательский файл css или эту страницу и добавьте свойство width, чтобы его настроить.

Надеюсь, это поможет.

[Редактировать]

По вашему запросу расстояния в комментариях: Что вам нужно сделать, это выбрать весь контейнер для каждого элемента управления и применить маржу это сверху и только снизу. В этом случае у вас уже был добавлен класс insertInfo, поэтому просто добавьте следующий класс в ваш файл css.

.insertInfo { 
    margin: 10px 0; 
} 

Кроме того, добавить этот класс в Datepicker DIV модальной кода, который отделен от входа, и мы должны применить ко всей DateTimePicker строки, а не только на входе в него так

<div class='input-group date insertInfo' id='datetimepicker1'> 

Я также обновил ссылку codepen, чтобы вы могли проверить ее работу там.Счастливое кодирование :)

Answer 2

просто добавить идентификатор = "DateTimePicker1" для вашего поля ввода

и добавить этот Java код сценария в конце страницы

<script> 
$(document).ready(function() { 
    $('#datetimepicker1').datetimepicker(
    { 
      autoclose: true, 
      //startDate : today, 
      //endDate:today, 
      format: "mm-dd-yyyy", 
      minView:2 
    }) 
     .on('click', function (e) { 
      setTimeout(function() { 
       $('#datetimepicker1').focus(); 
      }, 10); 
     });   
}) 
</script>