Как мне расположить элемент p-рычание в правом нижнем углу экрана? - PullRequest
Новая
       12

Как мне расположить элемент p-рычание в правом нижнем углу экрана?

0 голосов
/ 03 июля 2018

Я хочу, чтобы сообщение рыча было зафиксировано в правом нижнем углу, и я пытался сделать это, переопределяя классы css в p-growl. Моей первой попыткой было переопределить класс .ui-growl следующим образом: 

::ng-deep .ui-growl {   
    position: fixed;
    bottom: 0;
    right: 0;
    border: 3px solid #73AD21;
}

(Граница только для тестирования.) Это приводит к тому, что сам контейнер для выращивания будет удлиняться от вершины до самого дна, где он прилипает к нижнему правому краю. Фактическое рычание сообщения внутри контейнера рычания сообщения все еще появляется наверху контейнера. Моя вторая попытка состояла в том, чтобы применить правила css к классу css самого элемента сообщения .ui-growl-item.

Это делает реальное рычание прилипшим к правому нижнему углу, но оно также имеет неприятный эффект, по-видимому, стирая все другие правила стиля CSS в пределах значения по умолчанию .ui-growl-item, превращая рычание с зеленого / красного в практически невидимое.

enter image description here

Я указал рычание после переопределения класса css розовой стрелкой. Все, что вы можете увидеть, это несколько белых букв и часть символа ошибки. Зеленый блок - не часть рычания, а часть фона.

У кого-нибудь есть идеи о том, как я могу реализовать желаемые правила CSS на рычании, сохраняя при этом другие правила CSS, которые я не хочу менять? Я думаю, что я нашел файл по умолчанию здесь https://searchcode.com/codesearch/view/2686100/, но я не знаю, какие правила CSS по умолчанию я должен включить, чтобы он не потерял свой цвет. Что усложняет ситуацию, так это то, что цвет является условным, он становится красным в случае ошибки, зеленым - в случае успеха и т. Д.

EDIT:

Я пытался использовать top и left вместо того, чтобы добиться того же, но это нереальный вариант, потому что, когда содержание сообщения составляет большую часть, оно может исчезнуть из области просмотра. С другой стороны, небольшие сообщения не будут прилипать к нижней части.

1 Ответ

0 голосов
/ 05 июля 2018

Простой, просто измените атрибут top класса .ui-growl.

По умолчанию класс выглядит следующим образом. 

.ui-growl {
    top: 100px;
}

Измените это на. Или добавьте новый стиль. 

.ui-growl {
    top: 80vh !important;
}

Отрегулируйте верхнюю часть в соответствии с вашей позицией. vh - это Высота ViewPort, учитываемая в процентах от общего окна просмотра.

ОБНОВЛЕНИЕ: Используйте этот стиль Переопределить 

.ui-growl {
    top: auto;
    bottom: 0px;
}

Надеюсь, это поможет. :)

...