основные кнопки выбора ширины сжатия - PullRequest
Новая
       11

основные кнопки выбора ширины сжатия

0 голосов
/ 14 января 2019

enter image description here Я использую основной список выбора. Я обнаружил, что когда длина опций в целевом или исходном элементе управления больше, кнопки управления списком выбора в середине становятся меньше. Мой код списка выбора следует 

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

enter image description here

Я попробовал следующее в переопределении CSS, чтобы оно не уменьшалось, но ничего не получалось. 

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

}

1 Ответ

0 голосов
/ 14 января 2019

Проблема не в ширине кнопок.

Проблема в том, что 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>
...