日付ピッカーと隣接要素の間にスペースがない場合、角度ピックアップは機能しませんか？

なぜ動作しないのか知りたいのですが？このcodepenをご覧ください。私は2つのブートストラップインプットをそれぞれ別のタイプのdatepickerタイプを使用して1つずつ使用しようとしましたが、底にいくつかの要素を追加しました。理由を深く知りたい日付ピッカーと隣接要素の間にスペースがない場合、角度ピックアップは機能しませんか？

あなたの要素はイベントが正常に次のCSSを設定

誘発しないので、重複し

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Angular Date-Picker</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://rawgit.com/720kb/angular-datepicker/master/src/css/angular-datepicker.css"> 

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular-route.min.js"></script> 
    <script type="text/javascript" src="https://rawgit.com/720kb/angular-datepicker/master/src/js/angular-datepicker.js"></script> 
    </head> 
    <body ng-app="myApp"> 
    <div class="container"> 

     <div ng-controller="MainCtrl"> 
     <!-- This is the test template that eill be loaded into view --> 
     <h1>Test Template</h1> 

     <br><br> 
     <div class="well text-center"> 
      {{date}} 
     </div> 

     <div class="row"> 
      <div class="col-md-4"> 

      <!-- Start Date --> 
      <div class="form-group"> 
       <datepicker date-format="dd/MM/yyyy"> 
       <input ng-model="date" type="text" 
        placeholder="Start Date" class="form-control"/> 
       </datepicker> 
      </div> 

      <!-- Uncomment to make it work --> 
      <!--<br>--> 
      <!-- End Date --> 
      <div class="form-group"> 
       <datepicker date-format="dd/MM/yyyy"> 
       <input ng-model="date" type="text" 
        placeholder="End Date" class="form-control"/> 
       </datepicker> 
      </div> 

      <!-- Uncomment to make it work --> 
      <!--<br>--> 
      <div class="checkbox" ng-repeat="i in list"> 
       <label> 
       <input type="checkbox" value=""> 
       {{i}} 
       </label> 
      </div> 

      </div> 
     </div> 


     </div> 
    </div> 

    <script> 
     var app = angular.module('myApp', ['720kb.datepicker']); 

     /** 
     * CONTROLLER 
     * ======================================== 
     */ 
     app.controller('MainCtrl', ['$scope', function($scope) { 
     $scope.name = "Rj"; 
     $scope.list = ["item 1", "item 2", "item 3"]; 
     }]); 

    </script> 

    </body> 
</html>

出典

2017-05-03 John foo

に.clearfixを追加：O、あなたのチェックボックスのdivがhttps://codepen.io/anon/penピッカー – Ferus7

をoverlapingされます/ aWybMR – yurzui

ありがとうございました！ –

：

.form-group { 
    display: inline-block; 
}

デモ：https://codepen.io/anon/pen/JNyjVw

別のソリューションがであなたの入力をラップすることになりますが.row divs

https://codepen.io/anon/pen/LyjYwv

またはブラウザの要素インスペクタでそれをデバッグしよう.form-groupのdiv

https://codepen.io/anon/pen/PmKwoN

出典

2017-05-03 10:36:03 madalinivascu

要素間に余白を入れたくない場合は、各要素クラスのスタイルを設定する必要があります。 – Ferus7

y'allを説明してくれてありがとう！、ダミー私はいくつかのjsベースの理由があると思いました！ –

日付ピッカーと隣接要素の間にスペースがない場合、角度ピックアップは機能しませんか？

答えて

関連する問題