diff --git a/apps/red-ui/src/app/components/table-col-name/table-col-name.component.scss b/apps/red-ui/src/app/components/table-col-name/table-col-name.component.scss index 425f255c3..2db26872e 100644 --- a/apps/red-ui/src/app/components/table-col-name/table-col-name.component.scss +++ b/apps/red-ui/src/app/components/table-col-name/table-col-name.component.scss @@ -3,6 +3,7 @@ :host { display: flex; height: 30px; + flex: 1; > div { align-items: center; diff --git a/apps/red-ui/src/app/utils/sync-width.directive.ts b/apps/red-ui/src/app/utils/sync-width.directive.ts index 1f389a8c6..1c7dae6c2 100644 --- a/apps/red-ui/src/app/utils/sync-width.directive.ts +++ b/apps/red-ui/src/app/utils/sync-width.directive.ts @@ -15,6 +15,22 @@ export class SyncWidthDirective implements AfterViewChecked { this.matchWidth(); } + private get _sampleRow(): { tableRow: Element; length: number } { + const tableRows = document.getElementsByClassName(this.redactionSyncWidth); + let length = 0; + let tableRow: Element; + + for (let idx = 0; idx < tableRows.length; ++idx) { + const row = tableRows.item(idx); + if (row.children.length > length) { + length = row.children.length; + tableRow = row; + } + } + + return { tableRow, length }; + } + @debounce(0) matchWidth() { const headerItems = this.el.nativeElement.children; @@ -22,13 +38,18 @@ export class SyncWidthDirective implements AfterViewChecked { if (!tableRows || !tableRows.length) return; - const tableRow = tableRows[0]; - if (tableRow.children.length !== headerItems.length) return; + const { tableRow, length } = this._sampleRow; - for (let idx = 0; idx < headerItems.length - 1; ++idx) { + const hasExtraColumns = headerItems.length !== length ? 1 : 0; + + for (let idx = 0; idx < length - hasExtraColumns - 1; ++idx) { headerItems[idx].style.width = `${tableRow.children[idx].getBoundingClientRect().width}px`; headerItems[idx].style.minWidth = `${tableRow.children[idx].getBoundingClientRect().width}px`; } + + for (let idx = length - hasExtraColumns - 1; idx < headerItems.length; ++idx) { + headerItems[idx].style.minWidth = `0`; + } } @HostListener('window:resize')