web-dev-qa-db-ja.com

Angular UI Bootstrapダイアログ幅

Angular UI Bootstrap Dialogは実装が簡単ですが、カスタマイズが困難です。

一体どのように幅を変更しますか？それとも最大幅ですか？

http://angular-ui.github.com/bootstrap/#/dialog

$dialog.dialog({width:600})やその他のバリエーションを試しましたが、喜びはありません。

angularjsangular-uiangular-ui-bootstrap
20
Nick

ブラウザコンソールのダイアログを調べると、幅がcssのみで設定されていることがわかります。ドキュメントのオプションにより、本文またはダイアログ上でユーザー定義のクラス名を使用できるため、ページ内のさまざまなタイプに合わせて調整できます。

ドキュメントリファレンス： https://github.com/angular-ui/bootstrap/blob/master/src/modal/docs/readme.md

6
charlietfl

バージョン0.8/0.9では、モーダルクラスを指定しないようにレイアウトが変更されたため、少し手を加えて、次のようなネストされたCCS定義を使用できることがわかりました。

.xx-dialog .modal-dialog {
    width :90%;
    min-width: 800px;
}

そして、モーダルダイアログを起動するとき、次のようにwindowsStyleを指定します。

modalInstance = $modal.open({
        templateUrl: 'templates/editxxx.html',
        controller: EditXXCtrl,
        windowClass: 'xx-dialog',
        resolve: {
            xx_uuid: function () {
                return xx_guid;
            }
        }
    });

ただし、windowsstyleはbackdropを含むWHOLEウィンドウ用であることに注意してください。それが役に立てば幸い

40
Kim Ras

デフォルトのCSSクラスはmodalです。dialogClassオプション（またはoptionsディレクティブを使用している場合はmodal属性）を使用して、追加のCSSクラスを指定します。例えば：

$dialog.dialog({dialogClass: 'modal modal-huge'});

モーダルディレクティブの場合：

<div modal="modalVisible" close="close()" 
     options="{dialogClass:'modal modal-huge'}">
   <div class="modal-header"><h3>Hello</h3></div>
   <div class="modal-body">Hello world!</div>
   <div class="modal-footer">
        <button ng-click="dialogs.escolherModelo=false" 
                class="cancel btn btn-warning">Cancel</button>
   </div>
</div>

ダイアログの幅を乱している場合、ダイアログを中央に配置するには、CSSルールに負のmargin-left幅の半分：

.modal-huge {
    width: 80%;
    margin-left: -40%;
}
@media (max-width: 600px) {
    .modal-huge {
        width: 580px;
        margin-left: -290px;
    }
}

[更新]

現在はwindowClassと呼ばれ、CSSルールは内側の.modal-dialogに対応している必要があります。したがって、-.modal-huge .modal-dialog – SET

痛い、javascriptの世界では何も解決されていないようだ。これはテストされていません：

$dialog.dialog({windowClass: 'modal-huge'});

モーダルディレクティブの場合：

<div modal="modalVisible" close="close()" 
     options="{windowClass:'modal-huge'}">
   <div class="modal-header"><h3>Hello</h3></div>
   <div class="modal-body">Hello world!</div>
   <div class="modal-footer">
        <button ng-click="dialogs.chooseModel=false" 
                class="cancel btn btn-warning">Cancel</button>
   </div>
</div>

ダイアログの幅を乱している場合、ダイアログを中央に配置するには、CSSルールに負のmargin-left幅の半分：

.modal-dialog .modal-huge {
    width: 80%;
    margin-left: -40%;
}
@media (max-width: 600px) {
    .modal-dialog .modal-huge {
        width: 580px;
        margin-left: -290px;
    }
}
7
Paulo Scardine

$ dialogサービスを使用して、angularのモーダルダイアログに別のクラスを追加する方法は次のとおりです。

var opts = {
    backdrop: true,
    keyboard: true,
    backdropClick: true,
    templateUrl: 'my-partial.html',
    controller: 'MyPartiallController',
    dialogClass: 'modal myWindow'
};
var d = $dialog.dialog(opts);
d.open();

Class = "modal myWindow"でダイアログが開きます-'modal'を含める必要があることに注意してください。そうしないと、ダイアログの内容が背景の下に表示されます。

次に、このCSSを使用して幅を変更できます。

.modal.myWindow {
    width:700px;
    margin-left:-350px
}

幅の1/2の負の左マージンを含める必要があります。そうしないと、中央からずれます。

3
Sammie Edwards