Primeng P-календарь того же размера, что родительский - PullRequest
Новая
       9

Primeng P-календарь того же размера, что родительский

0 голосов
/ 30 сентября 2018

Я использую p-календарь от primeng в пределах планшета.Как я могу сделать поле p-calendar такого же размера, как ячейка, в которой оно находится?Или более общий - как я могу сделать его такого же размера, как родительский div?

Вы можете заставить его работать с абсолютной шириной, используя style и inputStyle - но моя таблица имеет изменяемый размер - поэтому она не работает в этом случае.Я пытался, как рекомендовано, в разных местах: 

<p-calendar appendTo="body"  [style]="{'width':'95%'}" [inputStyle]="{'width':'95%'}"
</p-calendar>

Но это не работает, поскольку кнопка селектора даты имеет фиксированный размер.

Мне кажется, это очень основное требование -возможность сделать компонент того же размера, что и его родитель.Действительно удивлен, что это не работает.

Спасибо, Майкл

Ответы [ 2 ]

0 голосов
/ 22 января 2019

Это работает для меня: 

<p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [timeOnly]="true"></p-calendar>
0 голосов
/ 30 сентября 2018

Ниже я попытался добиться этого:

Добавьте свой собственный класс, чтобы переопределить CSS-контейнер даты.Как я добавил class = "treetableDate" 

    <p-calendar [(ngModel)]="date1" 
[style]="{'width':'70%'}" [inputStyle]="{'width':'70%'}" class="treetableDate"></p-calendar>

Теперь переопределите CSS компонента календаря.Как показано ниже: 

.treetableDate .ui-widget-content{
    width: 80%; // or in pixel depends how much width you want.
}

Примечание. Не переопределяйте .ui-widget-content напрямую.В противном случае это повлияет на ширину каждого компонента в вашем приложении.Использование вашего собственного класса повлияет только на этот конкретный элемент.

...