Boostrap css input button addon alignment issue

Question

Прикрепленное изображение показывает мою кнопку datepicker, не касаясь ввода внутри загрузочного модального. Я просмотрел css в инструментах chrome dev и не могу найти ничего существенного. Я подумал, что это может быть проблема с входной группой внутри группы form. Любые идеи относительно того, что происходит?

Код:

<script> 
    $(document).on("click", ".modal-body", function() { 
     $("#datepicker").datepicker(); 
     $('#btn').click(function() { 
      $("#datepicker").focus(); 
     }); 
    }); 
</script> 

<div id="calendarModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 

      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h3 class="modal-title">Add Reminder:</h3> 
      </div> 
      <div class="modal-body"> 
       <h4 id="modal-date"></h4><br /> 
       <form> 
        <div class="form-group"> 
         <label for="reminderTitle" class="control-label">Title:</label> 
         <input type="text" class="form-control" id="reminderTitle"> 
        </div> 
        <div class="form-group"> 
         <label for="datepicker" class="control-label">Date/Time:</label> 
         <div class="input-group"> 
          <input type="text" id="datepicker" class="form-control" placeholder="Select Date" /> 
          <span class="input-group-addon" id="btn"> 
           <i class="fa fa-calendar-o"></i> 
          </span> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="reminderComments" class="control-label">Comments:</label> 
         <textarea class="form-control" id="reminderComments"></textarea> 
        </div> 
       </form> 
      </div> 

      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="saveModal()">Save</button> 
      </div> 
     </div> 
    </div> 
</div> 

<style> 
    #datepicker { 
     z-index: 9999 !important; 
    } 
</style> 

UPDATE

Я нашел еще Css Thats осуществившего ... site.css имеет следующий код:

input, select, textarea { max-width: 280px; } 

Как я могу переопределить это для этого модального вида?

Answer 1

Это был ответ: unknown gap before input-group-addon in default asp.net mvc 5 template

Я заметил, что мой site.css здесь:

/* Set width on the form input elements since they're 100% wide by default */ 
input, 
select, 
textarea { 
    max-width: 280px; 
} 

И прибавил:

.input-group { max-width: 280px; } 

Чтобы сделать это, наконец, после почти двух дней выглядит так:

Answer 2

Вы используете jQuery ui datepicker.

Проблема, которую я сразу вижу, заключается в том, как вы пытаетесь позиционировать дату, когда она появляется.

Эта линия CSS неправильно:

#datepicker { 
    z-index: 9999 !important; 
} 

Вместо этого попробуйте использовать beforeShow:

Для задачи выравнивания необходимо создать доказательства с скрипкой или добавить ваш CSS.

Сниппет:

$(document).on("click", ".modal-body", function() { 
 
    $("#datepicker").datepicker({ 
 
    beforeShow: function(input, inst) 
 
    { 
 
     $(input).css("z-index", "999999"); 
 
     inst.dpDiv.css({top: ($("#datepicker").offset().top/2)+ 'px', marginLeft: '0px'}); 
 
    } 
 
    }); 
 
    $('#btn').click(function() { 
 
    $("#datepicker").focus(); 
 
    }); 
 
}); 
 

 

 
// open the modal.... 
 
    $("#calendarModal").modal();

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div id="calendarModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 

 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
       <h3 class="modal-title">Add Reminder:</h3> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <h4 id="modal-date"></h4><br /> 
 
       <form> 
 
        <div class="form-group"> 
 
         <label for="reminderTitle" class="control-label">Title:</label> 
 
         <input type="text" class="form-control" id="reminderTitle"> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="datepicker" class="control-label">Date/Time:</label> 
 
         <div class="input-group"> 
 
          <input type="text" id="datepicker" class="form-control" placeholder="Select Date" /> 
 
          <span class="input-group-addon" id="btn"> 
 
           <i class="fa fa-calendar-o"></i> 
 
          </span> 
 
         </div> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="reminderComments" class="control-label">Comments:</label> 
 
         <textarea class="form-control" id="reminderComments"></textarea> 
 
        </div> 
 
       </form> 
 
      </div> 
 

 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
       <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="saveModal()">Save</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

Я думаю, что у вас есть некоторые CSS, что мы не можем видеть изменения ширины на вход в. Элемент значка находится на правильном пути, потому что это то, где он должен быть. Bootstrap элементы формы имеют 100% ширину по умолчанию:

.form-control { 
    display: block; 
    width: 100%; 
    ... 
} 

Вы должны иметь что-то влияет на ширину входа и это проблема.

https://jsfiddle.net/b3c6xd6s/1/