web-dev-qa-db-fra.com

Angular UI Bootstrap Width Dialog Width

La boîte de dialogue Angular UI Bootstrap est facile à implémenter, mais difficile à personnaliser).

Comment diable changez-vous la largeur? Ou même largeur max?

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

J'ai essayé $dialog.dialog({width:600}) et d'autres variantes mais pas de joie.

angularjsangular-uiangular-ui-bootstrap
20
Nick

Inspectez une boîte de dialogue dans la console du navigateur pour voir que la largeur est définie avec css uniquement. Les options dans les documents permettent des noms de classe définis par l'utilisateur sur le corps et/ou sur la boîte de dialogue afin que vous puissiez ajuster pour différents types dans la page

Référence des documents: https://github.com/angular-ui/bootstrap/blob/master/src/modal/docs/readme.md

6
charlietfl

Pour la version 0.8/0.9, la disposition a changé de sorte que vous ne spécifiez pas la classe modale, je l'ai un peu manipulé et j'ai constaté que je pouvais utiliser une définition CCS imbriquée comme ceci:

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

Et lorsque vous lancez la boîte de dialogue modale, spécifiez le style de fenêtre comme ceci:

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

Mais sachez que le style de fenêtre est pour la fenêtre entière, y compris la toile de fond. J'espère que cela aide

40
Kim Ras

La classe CSS par défaut est modal, utilisez l'option dialogClass (ou l'attribut options si vous utilisez la directive modal) pour spécifier des classes CSS supplémentaires, par exemple:

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

Pour la directive modale:

<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>

Si vous jouez avec la largeur de la boîte de dialogue, afin d'avoir la boîte de dialogue centrée, la règle CSS a besoin d'un margin-left Négatif de la moitié de la largeur:

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

[MISE À JOUR]

il s'appelle maintenant windowClass et votre règle css devrait être pour .modal-dialog interne, donc c'est comme - .modal-immense .modal-dialog - SET

Aïe, il semble que rien ne soit jamais réglé dans le monde javascript. Ceci n'est pas testé:

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

Pour la directive modale:

<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>

Si vous jouez avec la largeur de la boîte de dialogue, afin d'avoir la boîte de dialogue centrée, la règle CSS a besoin d'un margin-left Négatif de la moitié de la largeur:

.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

Voici comment ajouter une autre classe à la boîte de dialogue modale dans angular en utilisant le service $ dialog:

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

La boîte de dialogue s'ouvrira avec class = "modal myWindow" - notez que vous devez inclure "modal" ou le contenu de la boîte de dialogue apparaîtra sous le fond.

Ensuite, avec ce css, vous pouvez changer la largeur:

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

Vous devrez inclure la marge gauche négative de la moitié de la largeur ou elle sera excentrée.

3
Sammie Edwards