主菜單列表按鈕的寬度縮小

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>