How could I change NbDialogService size?

Question

I'm opening a Dialog Service, using Nebular Template.

I'm using:

this.dialogService.open(FormModalComponent, {
  context: {
    title: title,
  },
});

To open the dialog and change the text of the title.

How could I change the size of the dialog window ?

have you found a solution in the meantime? If yes, please share! Thanks! — MatterOfFact, Nov 14 '19 at 13:23

score 0 · Answer 1 · answered Oct 28 '19 at 19:58

0

I was in the same situation. You can do something like this :

in your component add the following:

import { ViewEncapsulation } from '@angular/core';

below style inside component decorator:

encapsulation: ViewEncapsulation.None

this.modalService.open(ModalComponent, { size: 'lg', container: 'nb-layout' });

.modal-lg { max-width: 1490px !important; }

answered Oct 28 '19 at 19:58

Raphaël Etang-Salé

371
4
18

Hi, I found this solution, but actually is for modalService, not for dialogService. I've tried your solution, and i received: ERROR in src/app/pages/rule-manager/regras/regras.component.ts(45,7): error TS2345: Argument of type '{ size: string; container: string; context: { title: string; }; }' is not assignable to parameter of type 'Partial>>'. Object literal may only specify known properties, and 'size' does not exist in type 'Partial>>'. – Bisneto Oct 28 '19 at 20:07
this.dialogService.open(FormModalComponent, { size: 'lg', container: 'nb-layout', context: { title: title, }, }); Argument of type '{ size: string; container: string; context: { title: string; }; }' is not assignable to parameter of type 'Partial>>'. Object literal may only specify known properties, and 'size' does not exist in type 'Partial>>'.ts(2345) – Bisneto Oct 28 '19 at 20:08

score 0 · Answer 2 · answered Dec 27 '19 at 12:28

0

You can add styles for your FormModalComponent and set it height via CSS. For example:

:host {
  height: 50vh;
}

answered Dec 27 '19 at 12:28

ArtemRomanovsky

129
4

score 0 · Answer 3 · answered Jun 18 '20 at 10:28

Add a class to dialog service like: dialogClass: 'model-full'

this.dialogService.open(FormModalComponent, {
  context: {
    title: title,
  }, dialogClass: 'model-full'
});

And a custom CSS like below:

.model-full {
  width: 100% !important;
  height: 100% !important;

  .cdk-visually-hidden {
    width: 99% !important;
    height: 99% !important;
  }

  nb-dialog-container {
    width: 100% !important;
    height: 100% !important;
  }
}

Also add same class 'model-full' on card like below.

<div class="card model-full">
  <div class="card-header">Some Heading</div>
  <div class="card-body">

  </div>
  <div class="card-footer text-right">

  </div>
</div>

score 0 · Answer 4 · answered Sep 21 '21 at 06:01

0

You can add styles for your FormModalComponent and set it height via CSS. For example: nb-dialog-container{ width: 80rem;

   nb-card{
       margin: auto;
       max-height: 90vh;
   } 
}

answered Sep 21 '21 at 06:01

Devendra Singh

1
1

How could I change NbDialogService size?

4 Answers4