主菜单列表按钮的宽度缩小

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的宽度取决于内容。 （与块元素不同）

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

上使用ui-picklist-item

请参见下面的示例

.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>