[英]Set primeNG p-dropdown width to min-content
我有一个 p-dropdown,它的宽度似乎没有改变。 但是,我希望它的宽度是最小内容的宽度。 我在PrimNG上找不到任何关于此的文档。 那么,有没有办法设置它的宽度? 谢谢!
<p-dropdown attr.data-property-name="{{ serverControl.name }}" autoWidth="false"
[name]="serverControl.name ? serverControl.name : 'testDropdown'" [options]="options"
[disabled]="serverControl.readOnly" [ngStyle]="{width: 'min-content'}" [required]="serverControl.required"
[title]="serverControl.title ? serverControl.title : ''"
[ngModel]="default" (onChange)="
serverControl.value = $event;
select.emit($event.value ? $event.value.toString() : null)
" #ddList="ngModel">
</p-dropdown>
文案
body .ui-dropdown {
border: 0.5px solid white !important;
max-width: 7vw !important;
min-width: 7vw !important;
// background: $holiday-calender-header-bg !important;
}
在primeng中可以使用styleClass
属性绑定来自定义p-dropdown
的样式
<p-dropdown attr.data-property-name="{{ serverControl.name }}" autoWidth="false"
[name]="serverControl.name ? serverControl.name : 'testDropdown'" [options]="options"
[disabled]="serverControl.readOnly" [ngStyle]="{width: 'min-content'}" [required]="serverControl.required"
[title]="serverControl.title ? serverControl.title : ''"
[ngModel]="default" (onChange)="
serverControl.value = $event;
select.emit($event.value ? $event.value.toString() : null)
" #ddList="ngModel" styleClass="my-dropdown">
</p-dropdown>
我的自定义 css
.my-dropdown {
width: 7rem;
}
您可以添加 [style]="{ width: '100%', overflow: 'visible' }"
<p-dropdown attr.data-property-name="{{ serverControl.name }}"
[style]="{ width: '100%', overflow: 'visible' }"
[name]="serverControl.name ? serverControl.name : 'testDropdown'" [options]="options"
[disabled]="serverControl.readOnly" [ngStyle]="{width: 'min-content'}" [required]="serverControl.required"
[title]="serverControl.title ? serverControl.title : ''"
[ngModel]="default" (onChange)="
serverControl.value = $event;
select.emit($event.value ? $event.value.toString() : null)
" #ddList="ngModel">
我遇到了同样的问题,然后我覆盖了自定义样式。 我添加了下面的代码,这对我来说很好。
.p-multiselect .p-multiselect-label.p-placeholder {
color: #6c757d;
white-space: break-spaces;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token{
margin: 2px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.