Как изменить размер флажка PrimeNG

#html #css #angular #primeng

#HTML #css #угловой #primeng

Вопрос:

Простой вопрос… как я могу изменить размер p-checkbox ? Без primeng я сделал что-то вроде <p-checkbox style="transform: scale(2.0)"></p-checkbox>

Но с primeng я получаю

 Error: Cannot find a differ supporting object 'transform: scale(2.0)'
    at ...

Как тогда сделать флажок больше?

Ответ №1:

Вы можете сделать это, просто перезаписав их css . Сначала измените размер флажка.
Вы должны установить оба класса ниже, чтобы флажок был центрирован:

     body .ui-chkbox {
      width: 25px;
      height: 25px;
    }

    body .ui-chkbox .ui-chkbox-box {
      width: 25px;
      height: 25px;
    }

Затем вы можете изменить размер флажка:

     body .ui-chkbox .ui-chkbox-box .ui-chkbox-icon {
      font-size: 20px;
    }

И при необходимости вы также можете захотеть изменить offset размер метки:

     body .ui-chkbox-label {
      margin: 0 0 0 0.8em;
    }

1. Можете ли вы предоставить немного больше информации? Я добавил эти CSS, я даже добавил !important везде, но мой флажок по-прежнему остается прежним.

2. @JohnDoe Куда ты добавил css? Он не должен быть ограничен. Обязательно добавьте его в свои глобальные стили. Вы можете предоставить мне jsfiddle, и я изменю его там,

Ответ №2:

Это решение может не подходить для всех сценариев, но оно сработало в моем случае.

 /*Increase p-checkbox size*/
:host ::ng-deep .ui-chkbox .ui-chkbox-box {
  width: 2em;
  height: 2em;
}

Ответ №3:

Вы можете указать width и height в CSS, например:

 .p-checkbox .p-checkbox-box {
  width: 14px;
  height: 14px;
}
.p-checkbox .p-checkbox-box .p-checkbox-icon {
  font-size: 8px;
}