CODEWITHSUNDEEP
angularnebular
Bisneto
Bisneto

Reputation: 133

How could I change NbDialogService size?

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 ?

Upvotes: 2

Views: 8008

Answers (4)

Devendra Singh
Devendra Singh

Reputation: 11

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

Upvotes: 1

Kartik Goyal
Kartik Goyal

Reputation: 386

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>

Upvotes: 0

ArtemRomanovsky
ArtemRomanovsky

Reputation: 129

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

:host {
  height: 50vh;
}

Upvotes: 0

Rapha&#235;l Etang-Sal&#233;
Rapha&#235;l Etang-Sal&#233;

Reputation: 390

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

Upvotes: 0

Related Questions