web-dev-qa-db-ja.com

ng-bootstrapモーダルサイズ

モーダルのカスタム幅を設定/オーバーライドする最良の方法は何ですか？

Ng-bootstrapは現在サポートしているようです

サイズ： 'sm' | 「lg」

ただし、Bootstrap 4はsm、md、lgをサポートしています。

理想的には、モーダルが反応し、コンテナのサイズと同様に調整されることを望みます。そして、モバイルではフルスクリーンになります。

EDIT： Bootstrap 4 _variables.scssには$ modal-md設定があるようですが、使用されていないようです。

$modal-lg:                    800px !default;
$modal-md:                    500px !default;
$modal-sm:                    300px !default;
angularng-bootstrap
28
Todd Smith

私が見つけることができる最もクリーンなソリューションは、windowClassプロパティを使用することです。

つまり：

this.modalService.open(MyModalComponent,  { windowClass : "myCustomModalClass"});

次に、グローバルCSSスタイルに次を追加します。コンポーネントのCSSからスタイルが選択されないため、これは重要です。

.myCustomModalClass .modal-dialog {
  max-width: 565px;
}
35
TomDK

このようにしてみてください：

import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ModelComponent } from './model.component';

export class Component {

    constructor(private modalService: NgbModal) {}

    open() {
        const modalRef = this.modalService.open(ModelComponent, { size: 'lg', backdrop: 'static' });
    }

}
22
Chandru

これは良い解決策だと思いました。

this.modalService.open(MyComponent, { windowClass: 'my-class'});

ng-deep“ shadow-piercing”子孫コンビネータを使用して、スタイルを子コンポーネントツリーからすべての子コンポーネントビューに強制的に移動できます。この場合、modal-dialog class。

::ng-deep .my-class .modal-dialog { 
     max-width: 80%;
     width: 80%;
}
11
DanniFilth

style.cssファイルに次のcssを追加します。

.xlModal > .modal-dialog {
    max-width: 1490px !important;
    min-width: 971px !important;   
    width: 95% !important;
}

注：.xlModalは任意の名前に置き換えることができます。

新しく作成されたスタイルでモーダルを開きます。

this.modalService.open(content,{windowClass:"xlModal"});
2
Kapil Thakkar

インターフェイスNgbModalOptionsにサイズxlを追加します。

export interface NgbModalOptions {
   size?: 'sm' | 'lg' | 'xl';
}

モーダルthis.modalService.open(content, { size: 'xl' });を開いているときに使用します

0
Ameer Pappay

sizeを指定しない場合、デフォルト値は$modal-md（500px）を使用します。

3つのモーダルsm、md、lgはすべて応答性があり、モバイルでは全幅（境界線付き）で表示されます。

本当に新しいサイズが必要な場合は、カスタムサイズを使用できます。

this.modalService.open(MyModalComponent, { size: <any>'xl' });

このクラスのCSSで：

.modal-xl {
  max-width: 1000px;
}

編集：xlサイズは標準サイズなのでCSSです。

0
Bastien

DjpalmeとKapil Thakkarの回答に加えて、前述のようにコンポーネントの「カプセル化」をNoneに設定する必要があります here

@Component({
    selector: 'app-generic-view',
    templateUrl: './generic-view.component.html',
    styleUrls: ['./generic-view.component.scss'],
    encapsulation: ViewEncapsulation.None
})
0
YnadW