How to set SPFx DetailList row width?

Question

I'm building a SPFx React webpart using Office UI Fabric. I want to use a DetailList, but it should only be displayed on 50% width on the screen, since I need to display some additional information concerning the selected item to the right of the list. I'm using Bootstrap to align these 2 components next to each other. This works, however there is always a horizontal scroll bar displayed in my DetailList because the row width is still set to full screen. When I resize the screen and enlarge again, the scrollbar is gone so it's only a problem with the initial render.

Here is what my DetailList looks like:

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

Any idea what I can do to initially set my cell width correctly of my control? Here is how it looks like on the screen:

Thanks in advance.

score 0 · Answer 1 · answered Mar 27 '19 at 12:48

You should describe each column width row in the "_columnsRoles" object that you are using here: columns={_columnsRoles}.

For example: const _columnsRoles: IColumn[] = [ { key: 'column1', name: 'column1',
fieldName: 'column1', minWidth: 36, maxWidth: 36, ... }, ... ]

How to set SPFx DetailList row width?

1 Answers1