Cannot set custom width for ngx smart modal

user_6049005 0
Viewed 2192

I am trying to set custom width in ngx-smart-modal.

I have tried steps given on (How to add unique custom CSS to ngx-smart-modals) and also tried solution for issues created for this project on github but no luck :(.

version "ngx-smart-modal": "^7.1.1",

in global styles.scss i imported

@import '~ngx-lightbox/lightbox.css';

@import "~ngx-smart-modal/ngx-smart-modal";

in component .html

<ngx-smart-modal [customClass]="'pack-modal-custom'" #packModal identifier="packModal" class="pack-modal">
  <p>
     love this game
  </p>
</ngx-smart-modal>

in component .scss

.pack-modal-custom{
  min-width: 800px !important;
  max-width: none !important;
  background-color: black !important;
 }

But still the width of this modal is coming 520px which is set in .nsm-dialog. Is there anything i am doing wrong ?

angular6 angular modal-dialog
1 Answers

Solutnion 1:

Change the component's encapsulation to encapsulation: ViewEncapsulation.Native

@Component({
  selector: ...,
  encapsulation: ViewEncapsulation.Native
  ...
})

Solutnion 2:

::ng-deep .pack-modal-custom{
  min-width: 800px !important;
  max-width: none !important;
  background-color: black !important;
 }

Solutnion 3:

Move your .pack-modal-custom sass code to a global .scss file (e.g. styles.scss in root folder)

Explenation:

You need to understand angular's component css mechanize first. Lets make long story short, when adding style to the component's .scss file, angular is generating a token that is responsible for adding the style to the component's elements only. This is the reason that you wont get your sass code affecting nxg-modal. In order to do that you'll need to change the component's encapsulation mode. Or add ::ng-deep which is "pushing" the style to a global style tag for you. Or you'll do it yourself by adding it to a global sass file.

Check this angular guild for more details.

user_23424140
Related