Question

我正在使用primeng p-dropdown模块。我已经附加了<ng-template>，以在三列中分别显示我的数据，名称，地址和电子邮件。如果不使用appendTo属性，则会导致大量文本掉落到下一行以及难看的水平滚动条。我使用了appendTo="body"，并且文本删除问题已部分解决，但我仍然看到地址栏文本下降到了下一行。经过进一步调查，我发现p-dropdown输出了一个覆盖div元素，并且在我的案例中，它具有'min-width'的内联css样式属性设置为'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属性将类设置为extendWidth。类名显示在div上，但类似ng-reflect-klass="extendWidth"。而且即使在: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元素，可以为覆盖面板指定自定义类：

<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中添加以下类，以覆盖UI下拉菜单的样式。

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

Here forked stackblitz solution

如何覆盖p下拉重叠式div元素的内联样式属性

2 个答案: