Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RED-9372: fixed table-items moving on hover.

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2024-09-05 17:14:22 +03:00
parent 9bc05f1165
commit 81513d34dc
2 changed files with 10 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/lib/listing/table-content/table-content.component.scss
View File

@ -2,7 +2,7 @@
:host cdk-virtual-scroll-viewport {
height: calc(100vh - 50px - 31px - var(--iqser-top-bar-height) - 50px);
overflow-y: hidden !important;
overflow-y: auto !important;
background-color: var(--iqser-background);
@include mixins.scroll-bar;
@ -10,10 +10,6 @@
display: none;
}
&.has-scrollbar:hover ::ng-deep.cdk-virtual-scroll-content-wrapper {
grid-template-columns: var(--gridTemplateColumnsHover);
}
::ng-deep.cdk-virtual-scroll-content-wrapper {
grid-template-columns: var(--gridTemplateColumns);
display: grid;
@ -53,6 +49,10 @@
> * > div {
background-color: var(--iqser-not-disabled-table-item);
}
.scrollbar-placeholder {
background-color: var(--iqser-side-nav);
}
}
}
}
@ -65,10 +65,6 @@
right: 0;
padding-right: 10px;
}
.scrollbar-placeholder {
display: none !important;
}
}
}
}

11
src/lib/listing/table/table.component.ts
View File

@ -87,18 +87,17 @@ export class TableComponent<Class extends IListable<PrimaryKey>, PrimaryKey exte
}
private _setColumnsWidth(element: HTMLElement) {
let gridTemplateColumnsHover = '';
let gridTemplateColumns = '';
if (this.selectionEnabled) {
gridTemplateColumnsHover += '30px ';
gridTemplateColumns += '30px ';
}
for (const config of this.tableColumnConfigs) {
gridTemplateColumnsHover += `${config.width || '1fr'} `;
gridTemplateColumns += `${config.width || '1fr'} `;
}
gridTemplateColumnsHover += this.emptyColumnWidth || '';
const gridTemplateColumns = `${gridTemplateColumnsHover} ${SCROLLBAR_WIDTH}px`;
gridTemplateColumns += this.emptyColumnWidth || '';
gridTemplateColumns = `${gridTemplateColumns} ${SCROLLBAR_WIDTH}px`;
element.style.setProperty('--gridTemplateColumns', gridTemplateColumns);
element.style.setProperty('--gridTemplateColumnsHover', gridTemplateColumnsHover);
}
private _setItemSize(element: HTMLElement) {