Как установить ширину строки SPFx DetailList? - PullRequest
Новая
       7

Как установить ширину строки SPFx DetailList?

0 голосов
/ 10 декабря 2018

Я создаю веб-часть SPFx React с использованием Office UI Fabric.Я хочу использовать DetailList, но он должен отображаться только на 50% ширины на экране, так как мне нужно отобразить некоторую дополнительную информацию, касающуюся выбранного элемента, справа от списка.Я использую Bootstrap для выравнивания этих двух компонентов рядом друг с другом.Это работает, однако в моем DetailList всегда отображается горизонтальная полоса прокрутки, потому что ширина строки по-прежнему установлена ​​на весь экран.Когда я изменяю размер экрана и снова увеличиваю его, полоса прокрутки исчезает, так что это проблема только с начальным рендерингом.

Вот как выглядит мой DetailList: 

<div className="container-fluid">
            <div className="row">
              <div className="col-md-6">
                <DetailsList
                  items={roles}
                  columns={_columnsRoles}
                  setKey={'roles'}
                  layoutMode={DetailsListLayoutMode.fixedColumns}
                  selection={this._selectionRoles}
                  selectionPreservedOnEmptyClick={true}
                  selectionMode={SelectionMode.single}
                  onItemInvoked={e=>this._actionRolesPanel("edit")}
                  ariaLabelForSelectionColumn="Toggle selection"
                  ariaLabelForSelectAllCheckbox="Toggle selection for all items"
                />  
              </div>
              <div className="col-md-6">

              </div>
            </div>
          </div>

Любая идея, что яможно сделать, чтобы изначально установить ширину моей ячейки правильно моего контроля? Здесь выглядит как на экране:

Заранее спасибо.

1 Ответ

0 голосов
/ 27 марта 2019

Вы должны описать каждую строку ширины столбца в используемом здесь объекте "_columnsRoles": columns = {_ columnsRoles}.

Например: const _columnsRoles: IColumn [] = [{key: 'column1', имя:' column1 ',
fieldName:' column1 ', minWidth: 36, maxWidth: 36, ...}, ...]

...