0

私は、次のHTMLをUIB-日付ピッカーを使用しています:UIB日付ピッカーのボタンの高さ

<div id="date-group" class="form-group"> 
    <div class="input-group"> 
     <input id="dateInput" type="text" class="form-control" uib-datepicker-popup="{{format}}" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" ng-model="searchForm.date"/> 
     <span class="input-group-btn"> 
     <button type="button" class="btn btn-default" ng-click="open1()"> 
      <i class="glyphicon glyphicon-calendar"></i> 
     </button> 
     </span> 
    </div> 
</div> 

、それはこのようになります。私はブートストラップ3.3.6を使用しています。助言がありますか?

enter image description here

答えて

0

あなたはbutton .btn-default属性にCSSを変更する必要があります。いくつかのパディングをボタンに追加して、垂直方向の整列またはマージンを変更します。それにもかかわらず、位置を変更してください。

パディングを追加してボタンのマージンと縦線を調整しようとしましたが、デフォルトのブートストラップ・スタイリングが試したものを上書きしてしまいました。

Here's a nice little tutorial on styling Bootstrap buttonsまたはuse the Bootstrap documentationあなたが使用しているボタンのクラスを変更します。

または、ブートストラップのAngularディレクティブthe Datepicker Popupを見てください。私はそれがあなたの最善の策だと思います。

+0

はい私はそれを動作させるように試みることができますが、問題は "なぜこのようなことが起こったのですか?"です。ウェブには、何の努力もせずに動作するいくつかの例があります。例えばhttps://jsfiddle.net/uberspeck/4ht8y4nw/ – user2616232

+0

私が正しく言うならば、ボタンのデフォルトのスタイリングにはデフォルトのパディングはなく、デフォルトで余白を持たせると、他の要素と組み合わせるときに衝突する可能性があります。 – six03