如何覆盖 p-dropdown overlay div 元素的内联样式属性

Question

我正在使用 primeng p-dropdown 模块。我附上了一个 <ng-template> 以分别在三列中显示我的数据，名称、地址和电子邮件。不使用 appendTo 属性会导致大量文本掉落到下一行和难看的水平滚动条。我使用了 appendTo="body" 并且文本丢失问题已部分修复，但我仍然看到地址栏文本掉落到下一行。经过进一步调查，我发现 p-dropdown 输出一个叠加层 div 元素，并且它有一个内联 css 样式属性 'min-width' 设置为 '473px' 在我的案件。这是输出的 div 元素。

<div class="ng-trigger ng-trigger-overlayAnimation ng-tns-c5-5 extendWidth ui-dropdown-panel ui-widget ui-widget-content ui-corner-all ui-shadow ng-star-inserted" ng-reflect-klass="extendWidth" ng-reflect-ng-class="ui-dropdown-panel  ui-widget u" style="min-width: 473px; z-index: 1001; top: 210px; left: 419.875px; transform: translateY(0px); opacity: 1;">

我使用 chrome 开发人员工具将其更改为 635px 并且覆盖面板变得足够宽以在一行中显示地址，水平滚动条不再存在。现在，我试图从 Angular 覆盖此内联样式，但我无法这样做。

库文档提供 panelStyle 属性以在叠加层 div 元素上应用内联样式，我尝试使用它，但由于无法应用 !important在这里使用（因为它将这些内联样式发送到后端的 ngStyle）。所以，它对我来说没用。
然后我尝试使用 panelStyleClass 属性将 class 设置为 extendWidth。 class 名称出现在 div 上，但像这样 ng-reflect-klass="extendWidth"。而且 class 中的 css 样式即使在 :host >>>

<p-dropdown
  name="customer"
  [style]="{ width: '100%' }"
  (onChange)="addCustomer()"
  [autoDisplayFirst]="false"
  [options]="customers"
  [(ngModel)]="selectedCustomer"
  optionLabel="fullName"
  [filter]="true"
  autofocus="true"
  [showClear]="true"
  required
  appendTo="body"
  panelStyleClass="extendWidth"
>
  <ng-template let-customer pTemplate="item">
    <div class="p-grid">
      <div class="p-col-3">{{ customer.value.fullName }}</div>
      <div class="p-col-6">{{ customer.value.streetAddress }}</div>
      <div class="p-col-3">{{ customer.value.email }}</div>
    </div>
  </ng-template>
</p-dropdown>

它应该让我以某种方式覆盖自定义最小宽度属性。

Answer 1

要覆盖 primeng 在元素上设置的 min-width，您可以为覆盖面板指定自定义 class：

<p-dropdown panelStyleClass="minWidthOverride" ... >

然后在 css 主文件中设置样式：

.minWidthOverride {
  min-width: 650px !important;
}

它必须在主 css 文件而不是组件样式中的原因是您将叠加层附加到页面的 body 而不是作为组件的子项。

见updated stackblitz demo

PS：我可能会选择不同的布局，这样地址就不会在 col-xs-3 中，而是在 col-xs-12 中，因此它有足够的空间。地址太长，无法在下拉面板的 3 列内合理显示。

Answer 2

您需要在 style.css 中添加以下 class 以覆盖 UI 下拉菜单的样式。

ui-dropdown-panel .ui-dropdown-items-wrapper {
    overflow: auto;
    min-width: 360px;
}

Here forked stackblitz solution

如何覆盖 p-dropdown overlay div 元素的内联样式属性

How to override inline style attributes of p-dropdown overlay div element

angular

primeng

primeng-dropdowns