web-dev-qa-db-ja.com

ngxを変更する方法bootstrapモーダル幅？

Ngx bootstrapモーダルに幅を設定するにはどうすればよいですか。

これがhtmlです

    <div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" 
     role="dialog" [config]="{backdrop: 'static'}" aria-hidden="true">
    <div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-body text-center">
            <button type="button" class="close" data-dismiss="modal" aria-
    label="Close" (click)="hide()"><span aria-hidden="true">&times;</span>
     </button>
            <h4 class="modal-title" id="myModalLabel">Are you sure?</h4>
            <div class="modal-footer">
                <div class="col-xs-6 no-padding-left">
                    <button type="button" id="dialog_no" class="btn btn-
        default btn-block" data-dismiss="modal" (click)="hide()">No</button>
                </div>
                <div class="col-xs-6 no-padding-right">
                    <button type="button" id="dialog_yes" class="btn btn-
     primary btn-block ladda-button" data-style="expand-right" 
     (click)="confirm()">Yes</button>
                </div>
            </div>
        </div> 
    </div>
     </div>
  </div>

ボタンのモーダルの幅を、モーダルのエッジにちょうど配置するように設定するにはどうすればよいですか？

モーダルブートストラップ

CSSファイルにはまだスタイルを設定していません。幅を変更しようとしても、方法がわからないのですが...

cssmodal-dialogstyles
11
code_newbie23

モーダルのメソッド呼び出しで、ngx-bootstrapにも付属するModalOptionsクラスを使用して構成オブジェクトをセットアップできます。その中で、「class」プロパティを使用すると、追加されるクラスを渡すことができます。

const config: ModalOptions = { class: 'modal-sm' };
this.bsModalRef = this.modalService.show(YourComponent, config);

お役に立てれば

11
jgritten

「encapsulation：ViewEncapsulation.None」をコンポーネントデコレータに追加し、クラスを次のようにオーバーライドすることをお勧めします。

 .modal-dialog{
    max-width: 600px !important;
    width: 600px !important;
  }
3
Jay Ordway

モーダルを作成するとき、cssクラスを次のようなオプションに渡します。

this.modalService.show（template、{class： 'modal-lg'}）;

1
Savan Gadhiya

@ jgritten s応答に似ています。

this.modalRef = this.modalService.show(template);
this.modalRef.setClass('modal-sm');

max-widthから300px

1
LuckyLikey

コンテナーの幅を変更するには、CSSスタイルのみを使用できます。 。modal-dialogクラスのmax-widthプロパティを変更し、場合によっては- 。modal-smクラス。

0
Ilya Tarusin

モーダルを作成した後は、doucment.getelementsbyClassNameを使用できます。次に、要素minWidthを必要に応じて変更できます。

0
jim