ng-bootstrap datepickerelement.styleを上書きする方法

debugcn 投稿 Dev

ジェイさん

ng-bootstrap datepickerを使用していて、下の境界線が切り取られているという問題があります。ネストされたdivクラスが適用されていることが原因である可能性がありますが、ネストされたdivクラスをすべて調査して把握するのではなく、 Chrome開発ツールで問題が発生していることがわかったng-datepickerプロパティ（変換）を上書きしたい。問題については、添付の画像を参照してください。カレンダーアイコンをクリックすると、Chromeで、下の境界線が切り刻まれた状態で日付ピッカーが表示され、以下にcss / propertiesが適用されます。

    <ngb-datepicker class="dropdown-menu show" style="padding: 0px; position: absolute; top: 0px; left: 0px; transform: translate(0px, 28px);">

element.style {
    padding: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translate(0px, 28px);
}

Chromeでは、変換プロパティをに変更すると

    transform: translate(0px, -42px)

問題を修正しました。スタイルをハードコーディングしたくないので、Angular 6のstyle.cssでクラスを定義して、すべてのng-datepickerに適用できるようにします。この変換プロパティを上書きするにはどうすればよいですか？

ヒエングエン

ngb-datepickerのクラスまたはIDと、その特定のスタイルを設定できます。

  <ngb-datepicker class="dropdown-menu show mydatepicker">

style.cssで

.mydatepicker{
    padding: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translate(0px, -42px);
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-08-15

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

ng-bootstrap datepickerelement.styleを上書きする方法

ng-bootstrap datepickerelement.styleを上書きする方法

Angular 6 - ng-bootstrap - Style Tabs

「ngx-bootstrap」と「@ ng-bootstrap / ng-bootstrap」が混同されています

ng-bootstrap datepickerを国際化する方法は？

Angular5ng-bootstrap-ngb-panelだけを使用する方法

Rails + Bootstrap テーマ: Bootstrap が CSS / Google Fonts を上書きする

Ng-bootstrapモデルを閉じる方法

b-modalでvue-bootstrapスタイルを上書きする方法

角度のあるng-bootstrapブレークポイントを取得する方法

ng-bootstrapツールチップに遅延を追加する

ng-bootstrapをangular-cli1.0.0-beta.18で使用する

ng-bootstrap typeahead：Observable <string []>ではなくObservable <Person []>を処理する方法

ng2-bootstrapを使用してBootstrap3からBootstrap4に切り替える方法は？

angle-cli＆ng-bootstrapを使用してBootstrap 4 SCSS変数をカスタマイズする方法は？

ng-bootstrapモーダル内のdivにng-bootstrapカルーセルを取り付ける

Angular9ではNg-bootstrapを使用できません

ng2-bootstrapでDropdownModuleを使用できません

Ng-bootstrapがtootipを表示できません

Bootstrapで2つの画像を上書きする

Bootstrap3のフォーカスを上書きする

Bootstrapのプロパティを上書きする

ng-bootstrapテーブルから行を削除します

無効化の通知をng2-bootstrapのTimepickerに渡す

ng-bootstrapを使用するには、index.htmlにbootstrap.min.cssを追加する必要がありますか？

プログラムでng-bootstrapモーダルを閉じる方法は？

プログラムでng-bootstrapモーダルを閉じる方法は？

プログラムでng-bootstrapモーダルを閉じる方法は？

子コンポーネントであるng-Bootstrap-Modalを開く方法は？

ng-bootstrapポップオーバーにデータを渡す方法

Bootstrap v3Twitterを使用してフッターの高さを上書きする方法