Невозможно установить пользовательскую ширину для умного модального окна ngx - PullRequest
0 голосов
/ 16 июня 2019

Я пытаюсь установить пользовательскую ширину в ngx-smart-modal.

Я попробовал описанные шаги ( Как добавить уникальный пользовательский CSS в ngx-smart-modals ), а также попытался решить проблемы, созданные для этого проекта на github, но безуспешно: (.

версия "ngx-smart-modal": "^ 7.1.1",

в глобальных стилях. Scss я импортировал

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

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

в компоненте .html

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

в компоненте .scss

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

Но все же ширина этого модала составляет 520 пикселей, который устанавливается в .nsm-диалоге. Что-то я делаю не так?

1 Ответ

1 голос
/ 16 июня 2019

Solutnion 1:

Изменить encapsulation компонента на 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:

Переместите .pack-modal-custom код sass в глобальный файл .scss (например, styles.scss в корневой папке)

Explenation:

Сначала вам нужно разобраться в механизме css-компонента angular. Короче говоря, при добавлении стиля в файл .scss компонента angular генерирует маркер , который отвечает за добавление стиля только к элементам компонента. Это причина того, что вы не получите свой sass-код, влияющий на nxg-modal. Для этого вам нужно изменить режим инкапсуляции компонента. Или добавьте ::ng-deep, который "подталкивает" стиль к глобальному тегу стиля для вашего. Или вы сделаете это сами, добавив его в глобальный файл sass.

Проверьте эту угловую гильдию для более подробной информации.

...