Is it possible to wrap lines of long header name in office UI fabric Detail List?

Question

Followed steps in the post: Can Office Fabric DetailsList column headers be styled?. I was able to style the header, but few of headers are very lengthy and its getting truncated.

I tried using wordWrap: 'break-word' in style but it didn't change anything:

private renderCustomHeaderTooltip(tooltipHostProps: ITooltipHostProps): JSX.Element {
    return (
      <span
        style={{
          display: 'flex',
          fontWeight: 'bold',
          wordWrap: 'break-word'
        }}
      >
        {tooltipHostProps.children}
      </span>
    );
  }

Is it possible to wrap and display full header in Office-UI-fabric Detail list?

Have you tried `flexWrap: wrap;`? Also, can you create a small quick demo at codesandbox.io? It will make it easy to help. — Saqib, Aug 26 '19 at 06:58
Kindly create a demo and share the link, I will look into it. — Saqib, Aug 26 '19 at 07:11
https://developer.microsoft.com/en-us/fabric#/controls/web/detailslist/customitemcolumns — Nagabhushana G M, Aug 26 '19 at 07:12
Its office-fabric-ui component in react, I have posted link of detailList above. Will also create demo — Nagabhushana G M, Aug 26 '19 at 07:13
I looked at it, waiting for your demo, so I can help you in your current code with all the changes that you have already added from the other post. — Saqib, Aug 26 '19 at 09:34

score 1 · Accepted Answer · answered Aug 29 '19 at 07:23

Column width could be adjusted by specifying IColumn.minWidth and IColumn.maxWidth properties, for example:

const columns = 
[
    {
      key: "thumbnail",
      name: "too long column name goes here... too long column name goes here... too long column name goes here... too long column name goes here... too long column name goes here...",
      fieldName: "thumbnail",
      minWidth: 1220,
      maxWidth: 1440,
    },
    ...
];

<DetailsList
    items={items}
    setKey="set"
    columns={columns}
    onRenderDetailsHeader={this.renderDetailsHeader}
  />

Result

Is it possible to wrap lines of long header name in office UI fabric Detail List?

1 Answers1