How can I set dialog width in ngDialog

Question

I'm simply trying to set the width of the dialog box, and I haven't succeeded (yet). I have added a CSS class, but the width set is the one of the dialog shade.

.dialogwidth800 {
    width : 800px;
}
...
ngDialog.openConfirm({
    template: 'templateRemove',
    className: 'ngdialog-theme-default dialogwidth800',
    scope: $scope
}).then(

EDIT : fiddle corrected with working solution here : https://jsfiddle.net/jr626fww/8/

The class name of modal content is **ngdialog-content** CSS: .ngdialog.dialogwidth800 .ngdialog-content{width : 800px;} — Walter Chapilliquen - wZVanG, May 09 '15 at 06:44
@wZVang is right , apply width to the class .ngdialog-content. — Konammagari, May 09 '15 at 06:53
Thanks a lot, I used @wZVanG solution, and I edited the Fiddle. — GuillaumeS, May 09 '15 at 13:28

score 14 · Answer 1 · answered Feb 18 '16 at 07:11

It can easily achieved by using custom css like below :

.ngdialog.ngdialog-theme-default.custom-width-800 .ngdialog-content {
    width: 800px;
}
.ngdialog.ngdialog-theme-default.custom-width-900 .ngdialog-content {
    width: 900px;
}

Use these css class when you open ngDialog :

To use custom-width-900

ngDialog.openConfirm({
    template: 'templateRemove',
    className: 'ngdialog-theme-default custom-width-800',
    scope: $scope
});

To use custom-width-900

ngDialog.openConfirm({
    template: 'templateRemove',
    className: 'ngdialog-theme-default custom-width-900',
    scope: $scope
});

score 10 · Answer 2 · answered May 09 '15 at 09:08

10

Apply width with class .ngdialog-content{width :100px !important;} Using !important is very important to override any css property

answered May 09 '15 at 09:08

Bharat Bhushan

2,077
2
21
34

1

Use "!important" at least used when needed and there is no way to edit the class. However, this time, you can get the results by adding the class to the main class: .ngdialog.dialogwidth800 .ngdialog-content {...} – Walter Chapilliquen - wZVanG May 09 '15 at 21:19
2

This solution affects all ngDialogs. @BharatBhushan – betomoretti Feb 18 '16 at 15:07
@betomoretti did you find a proper solution for this? – Spongebob Comrade Nov 05 '19 at 06:18

How can I set dialog width in ngDialog

2 Answers2