sp-dev-fx-controls-react
sp-dev-fx-controls-react copied to clipboard
pnp
ListView - Added ability to apply header styling
| Q | A |
|---|---|
| Bug fix? | [ ] |
| New feature? | [x] |
| New sample? | [ ] |
| Related issues? | Partially adds #410 |
What's in this Pull Request?
(This is my 1st open source contribution and I'm still fresh at TS/JS... bear with me.)
I added the ability to apply custom styles to the header of a ListView via optional prop headerClassName.
Something I was not able to implement was the ability to modify the font styling of the header text (size, weight, etc), so I set the header min-height to 17px which seemed small enough to scrunch everything without clipping any text - I tried testing as many scenarios as I could. Theoretically, to modify the font styling, I think you could add another styling prop to ListView, and apply that prop to '.ms-DetailsHeader-cellTitle' in ListView.tsx... I can experiment with this at another time.
For my use case, although likely unconventional, I'm using a ListView in a tight spot on a page and need all the real estate being taken up by the default padding (padding-top of 16px) and line height (42px iirc).
Let me know if I'm, at all, doing this incorrectly (lol).
Ah, I understand your reasoning about the class names. I'm not sure of a good alternative at the moment, I'll have to do some digging and tinkering.
Hi @bradleypregon,
Are you still working on this PR? Do you need help?
Hello @michaelmaillot,
Apologies for the late reply. Yes, I am still working on the PR, although I have not looked at it for some time, and I'm still stuck.
I tried a few different approaches, one involving the use of mergeStyleSets from the office-ui-fabric-react package, to no avail. If memory serves, every approach I found relied on utilizing the styling class name directly. I'm just not sure of a solid and practical way to access/modify the list header styling.