css - primeng 选择列表按钮宽度缩小

Question

我正在使用 primeng 选择列表。我发现当目标或源控件中的选项长度较大时，中间的选择列表控件按钮会变小。我的选择列表代码如下

<p-pickList [source]="availableFormula" [target]="selectedFormula" sourceHeader="Available Formula"
      targetHeader="Selected Formula" [responsive]="true" filterBy="Name" dragdrop="true" dragdropScope="cars"
      sourceFilterPlaceholder="Search by Formula" targetFilterPlaceholder="Search by Formula" [sourceStyle]="{'height':'300px'}"
      [targetStyle]="{'height':'300px'}" showSourceControls="false" [showTargetControls]="false" (onSourceSelect)="formulaSelectEvent($event)"
      (onTargetSelect)="formulaSelectEvent($event)">
      <ng-template let-availableFormula pTemplate="item">
        <div class="ui-helper-clearfix">
          <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{availableFormula.Name}}</div>
        </div>
      </ng-template>
    </p-pickList>

我在 CSS 重写中尝试了以下方法以使其不收缩，但没有任何效果。

 .ui-picklist-buttons{
width: 100% !important;

Answer 1

问题不在于按钮的宽度。

问题是 picklist-buttons 和 picklist-listwrapper 被声明为 table-cell 和 td's 根据内容增加宽度。 (不像 block 元素)

如果您只想固定列宽，请在 ui-picklist 上使用 table-layout: fixed。如果问题是一个列表中有一个很长的单词，请在 picklist-listwrapper 或 ui- 上使用 word-break: break-word选择列表项

看下面的例子

.fixed {
  table-layout: fixed;
  width: 100%;
}

.buttons {
  width: 20%;
  background: blue;
}
.list {
  width: 40%;
  background: red;
}

.not-fixed .list {
  word-break: break-word;
}

<!–– with table-layout: fixed  but no break-word -->
<table class="fixed">
  <tr>
    <td class="list">40percent</td>
    <td class="buttons">button</td>
    <td class="list">veryveryveasasasarylongtextthatdoesntfitin40percent</td>
  </tr>
</table>

<!–– with break-word -->
<table class="not-fixed">
  <tr>
    <td class="list">40percent</td>
    <td class="buttons">button</td>
    <td class="list">veryveryveasasasarylongtextthatdoesntfitin40percent</td>
  </tr>
</table>