Question

我正在使用Office UI Fabric构建SPFx React Webpart。我想使用一个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>

有什么想法我该如何正确设置控件的初始单元格宽度？ Here就是屏幕上的样子：

谢谢。

Answer 1

您应该在此处使用的“ _columnsRoles”对象中描述每个列宽行：columns = {__ columnsRoles}。

例如： const _columnsRoles：IColumn [] = [ { 键：“ column1”，名称：“ column1”，
fieldName：'column1'， minWidth：36， maxWidth：36， ... }， ... ]

如何设置SPFx DetailList行宽？

1 个答案: