将 primeNG p-dropdown 宽度设置为 min-content答案

【问题标题】：Set primeNG p-dropdown width to min-content将 primeNG p-dropdown 宽度设置为 min-content
【发布时间】：2019-12-15 19:38:41
【问题描述】：

我有一个 p 下拉菜单，它的宽度似乎没有改变。但是，我希望它的宽度是最小内容的宽度。我在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;
}

【问题讨论】：

标签： html css angular dropdown primeng

【解决方案1】：

你可以添加 [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">

【讨论】：

【解决方案2】：

您可以使用styleClass属性绑定来自定义primeng中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;
}

【讨论】：