How to force column headers to wrap

[aconley]

I have a requirement to always show all of the column header text, even if the column isn’t wide enough to show the full text. The idea would be to wrap the column header text, and change the height of the header row so it shows the full text of the tallest column header.
Is there a built-in way to accomplish this?
I tried fiddling with styles, and I can force the header text to wrap, but I can’t seem to get the style right to allow the header row to grow and shrink to accommodate the tallest column header. I suspect it is because the column header elements are positioned with absolute inside the header row.
Appreciate any help in finding a solution.
Thanks!

[YavorDashev]

Hi aconley,
I have created a quick code snippet using CSS so that it will showcase/guide you to how to have this functionality.
CSS code snippet:

smart-grid-column[data-field='name'],
smart-grid-column[data-field='name'] .smart-label {
	line-height: initial!important;
	white-space: pre-line;
	text-overflow: initial!important;
}

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[aconley]

Hi Yavor,
I tried what you suggested but that only gets the header to wrap. The header row still doesn’t resize to show the full column name. Here is a Stackblitz showing what I’m seeing, based on the basic example in the docs (I upgraded the @smart-webcomponents-angular/grid dependency to the latest version):
https://stackblitz.com/edit/github-2bkwnw
I made the Product name column label long (Product Name and Stuff), and set that column’s width to something small. I applied your CSS to the assets/styles.css. The header text wraps now, but the header row isn’t tall enough to show the full text.
I’m looking for a fix, in CSS and/or script, that will allow the height of the column header to automatically resize to fit the content, especially when the user changes the width of the column. I did a little more digging, and found the onColumnResize event. In that event I could detect the height of the tallest header, but is there a way in script to set the height of the header row?
Thanks for the help!

[aconley]

I’ve been playing with this more, and I think I found a solution. A combination of CSS to wrap text and center the column header vertically, and handling the onColumnResize event to set the header row height. I updated the Stackblitz, but the important parts are below. I was able to get the headers to resize when the grid first loads with that onReady handler, but for some reason it doesn’t work in the Stackblitz.
CSS

smart-grid-column {
  height: 100% !important;
  line-height: normal !important;
}
smart-grid-column .smart-label {
  white-space: normal !important;
  word-break: break-word;
  display:inline-flex !important;
  align-items: center;
}
smart-grid-column .smart-label.align-right {
  flex-direction: row-reverse;
}

Typescript

ngAfterViewInit(): void {
  ...other stuff here...
  this.subscriptions.push(this.grid.onColumnResize.subscribe(() => this.resizeColumnHeaders()));
  this.subscriptions.push(this.grid.onReady.subscribe(() => this.resizeColumnHeaders()));
}
private resizeColumnHeaders() {
  const header = this.grid.nativeElement.querySelector('.smart-grid-column-header') as HTMLElement;
  if (header) {
    // Since column header cells are centered vertically, the 8 here just gives some padding
    header.style.height = (this.getMaxHeaderHeight() + 8) + 'px';
  }
}
private getMaxHeaderHeight(): number {
  const headerNodes = this.grid.nativeElement.querySelectorAll('smart-grid-column .smart-label span');
  const heights: number[] = [];
  headerNodes.forEach(headerNode => heights.push(headerNode.clientHeight));
  return Math.max(...heights);
}

[Author]

Posts