1

我正在使用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 覆盖这种内联样式，但我无法这样做。

  1. 库文档提供panelStyle了在覆盖 div 元素上应用内联样式的属性，我尝试过使用它，但由于!important无法在此处应用（因为它将这些内联样式发送到ngStyle后端）。所以，在我的情况下它是没有用的。
  2. 然后我尝试使用panelStyleClass属性将类设置为extendWidth. 类名出现在 div 上，但像这样ng-reflect-klass="extendWidth"。并且类中存在的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>

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

4

2 回答 2

0

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

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

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

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

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

查看更新的 stackblitz 演示

PS：我可能会选择不同的布局，以便地址不在col-xs-3但col-xs-12有足够的位置。地址太长，无法在下拉面板的 3 列内合理显示。

于 2019-02-07T07:48:48.567 回答
0

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

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

这里分叉 stackblitz 解决方案

于 2019-02-08T09:21:47.520 回答