2017-07-27 6 views
0

は、私は私の実装が正しいカレンダーのスタイリングに表示されていない、ブートストラップ-DatTimePickerは、私はあなたがしかし正しくhereBootstrap-DateTimePickerカレンダーウィジェットにスタイルを修正するにはどうすればよいですか?

取り組んで見ることができる「最小セットアップ」を選択した

hereに位置して実施しています。これでカレンダーの表示エラーが表示されますJsFiddle

グリフコンカレンダーのドロップダウンをクリックすると、カレンダーには境界線が表示され、右端の角を越えてブリードします。

最初は私はすべての正しい依存関係を含んでいないと思っていましたが、二重チェックとそれらのすべてが正しくリストされていることを確認しても、それはまだ効果がありません。ここで

依存関係は私が持っている:私が正しく最小セットアップのためのブートストラップ-のDateTimePickerの例のように、カレンダーのモーダルのスタイルを表示する方法を把握しようとしています

<!-- Bootstrap & Core CSS (DPL) --> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
<link rel="import" href="https://cdn.rawgit.com/zerodevx/zero-md/v0.2.0/build/zero-md.html"> 
<link rel="stylesheet" href="https://cdn.rawgit.com/zerodevx/zero-md/v0.2.0/markdown-themes/default.css"> 
<link rel="stylesheet" href="https://cdn.rawgit.com/zerodevx/zero-md/v0.2.0/highlight-themes/default.css"> 

<link rel="stylesheet" href="/orion/ccdd.css"> 

<!-- Bootstrap, Custom, & Core jQuery Plugins DPL --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.12.4.min.js"></script> <!-- NEW *** Maybe Autocomplete???--> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> 
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> <!-- NEW --> 
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script> <!-- NEW --> 
<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.15/webcomponents-lite.min.js"></script> 

誰でもこれを達成する方法を知っていますか?

+2

カスタムCSS(またはテーブル、tbody、td、trのスタイリングに関連するすべてのもの)をフィドルから削除すれば、カレンダーはきれいに見えます。 CSSとDateTimePicker CSSの間に矛盾があります。あなたは、その種の矛盾を避けるために、クラスセレクタをより具体的にしようとするべきです。 –

+0

ありがとう、私はそれを試みます。 – lopezdp

+0

カスタムCSSで、datetimepickerで定義されているスタイルを上書きしないようにしてください。 – dariogriffo

答えて

1

ブラウザでWebインスペクタツールをまだ使用していない場合は、お勧めします。要素に移動し、要素に配置されているスタイルプロパティを表示するだけです。その後、独自のインラインCSSまたはCSSファイルと競合するものをオーバーライドするために、自分自身を追加することができます。

関連する問題