Блог

Главная - Вопросы по программированию - Проблема CSS с угловой проверкой и компонентами PrimeNG

Проблема CSS с угловой проверкой и компонентами PrimeNG

#angular #primeng #core-ui

#angular #primeng #ядро-пользовательский интерфейс

Вопрос:

Когда я использую атрибут «required» в компоненте PrimeNG, у меня возникла следующая проблема:

Скриншот 1 Проблема в том, что стиль css .ng-invalid находится в компоненте p-calendar, а не в самом вводе.

Скриншот 2

Есть ли способ переместить ng-invalid класс из компонента во входные данные ВНУТРИ компонента? Это легко решит мои проблемы?

спасибо за вашу помощь!

Комментарии:

1. почему бы вам просто не выбрать ввод с помощью .ng-invalid input ?

2. проблема все та же: граница размером 5 пикселей находится на компоненте, а не на входе ВНУТРИ компонента

Ответ №1:

У меня такая же проблема. Хитрость заключается в перемещении границы от компонента к входным данным. Это не исчерпывающий список компонентов Primeng, я добавляю их по мере их появления. 

 p-calendar.ng-invalid,
p-dropdown.ng-invalid,
p-selectbutton.ng-invalid {
  border-left: none;

  .ui-calendar input,
  .ui-dropdown,
  .ui-selectbutton {
    border-left: 5px solid red;
  }
}