diff --git a/src/controls/listView/IListView.ts b/src/controls/listView/IListView.ts index 03b3ed28b..571be9c4e 100644 --- a/src/controls/listView/IListView.ts +++ b/src/controls/listView/IListView.ts @@ -79,6 +79,11 @@ export interface IListViewProps { * Class name to apply additional styles on list view */ listClassName?: string; + /** + * Class name to apply additional styles on list view header + * (min-height 17px) + */ + headerClassName?: string; /** * Custom sorting function. * @returns sorted collection of items diff --git a/src/controls/listView/ListView.tsx b/src/controls/listView/ListView.tsx index 2995f1ec1..5cfa43c2e 100644 --- a/src/controls/listView/ListView.tsx +++ b/src/controls/listView/ListView.tsx @@ -572,17 +572,40 @@ export class ListView extends React.Component { return null; } + const headerProps = { + ...props, + className: this.props.headerClassName, + styles: { + root: { + lineHeight: "normal", + minHeight: '17px', + '.ms-DetailsHeader-cell': { + whiteSpace: 'normal', + lineHeight: 'normal', + height: '100%', + }, + '.ms-DetailsHeader-cellTitle': { + height: '100%', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + flexWrap: 'nowrap', + justifyContent: 'flex-start', + }, + ...props.styles, + }, + }, + } + if (this.props.stickyHeader) { return ( - {defaultRender({ - ...props, - })} + {defaultRender(headerProps)} ); } - return defaultRender(props); + return defaultRender(headerProps) } /** * Default React component render method diff --git a/src/webparts/controlsTest/components/ControlsTest.module.scss b/src/webparts/controlsTest/components/ControlsTest.module.scss index 38f191db9..de6f5b663 100644 --- a/src/webparts/controlsTest/components/ControlsTest.module.scss +++ b/src/webparts/controlsTest/components/ControlsTest.module.scss @@ -98,6 +98,12 @@ $themePrimary: '[theme:themePrimary, default:#0078d7]'; .listViewWrapper { height: 200px; } + + .listViewHeader { + padding-top: 1px; + padding-bottom: 1px; + height: 25px; + } } .dialogContainer { diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx index 204c563e3..9caa5d77a 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/src/webparts/controlsTest/components/ControlsTest.tsx @@ -1549,6 +1549,7 @@ export default class ControlsTest extends React.Component