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

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上table-layout: fixed 。 如果问题是一个列表中有一个很长的单词，请使用word-break: break-word在picklist-listwrapper或ui-picklist-item上使用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>