Boostrap CSS入力ボタンアドオンアラインメントの問題

Question

添付されている画像に、私の日付ピッカーボタンがブートストラップモーダル内の入力に触れないことが示されています。私はクロム開発ツールのCSSを見てきましたが、重要なものは何も見つかりませんでした。フォームグループ内の入力グループに問題があると考えました。何が起こっているかについての任意のアイデア？

コード：

<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を見つけた... Site.cssは、このコードを持っています

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

この特定のモーダルビューに対してこれをどのように変更できますか？

Answer 1

これが答えた：

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

をそして、この追加：私はここに私のsite.cssコメントアウトunknown gap before input-group-addon in default asp.net mvc 5 template

最終的にそれを作るために

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

をほぼ2日後にこのように見える：

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を持っていると思います。それはどこにあるべきなのかという理由で、アイコン要素は右端にあります。

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

あなたが入力幅に影響を与える何かを持っている必要がありますし、それが問題である：ブートストラップフォーム要素は、デフォルトで100%幅を有しています。

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