如何设置SPFx DetailList行宽?

loading...


0

我正在使用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是它在屏幕上的样子:

提前致谢 .

loading...

0回答

No Data

评论

暂时没有评论!