kodjo/MyFastHtml
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed scrollbar behavior

Browse Source
This commit is contained in:
Kodjo Sossouvi
2026-02-17 21:53:02 +01:00
parent 70915b2691
commit 5724c96917
3 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -25,6 +25,7 @@ tools.db
.idea_bak .idea_bak
**/*.prof **/*.prof
**/*.db **/*.db
screenshot*
# Created by .ignore support plugin (hsz.mobi) # Created by .ignore support plugin (hsz.mobi)
### Python template ### Python template

10
src/myfasthtml/assets/datagrid/datagrid.css
View File

@@ -161,9 +161,10 @@
.dt2-table { .dt2-table {
--color-border: color-mix(in oklab, var(--color-base-content) 20%, #0000); --color-border: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--color-resize: color-mix(in oklab, var(--color-base-content) 50%, #0000); --color-resize: color-mix(in oklab, var(--color-base-content) 50%, #0000);
height: 100%; height: fit-content;
max-height: 100%;
display: grid; display: grid;
grid-template-rows: auto 1fr auto; /* header, body, footer */ grid-template-rows: auto minmax(auto, 1fr) auto; /* header, body, footer */
overflow-x: auto; /* Enable horizontal scroll */ overflow-x: auto; /* Enable horizontal scroll */
overflow-y: hidden; /* No vertical scroll on table */ overflow-y: hidden; /* No vertical scroll on table */
scrollbar-width: none; /* Firefox: hide scrollbar */ scrollbar-width: none; /* Firefox: hide scrollbar */
@@ -225,6 +226,11 @@
width: 8px; width: 8px;
} }
/* Extra row reserved when horizontal scrollbar is visible */
.dt2-table.dt2-has-hscroll {
grid-template-rows: auto minmax(auto, 1fr) auto 8px; /* header, body, footer, scrollbar */
}
/* Horizontal scrollbar wrapper - bottom, full width minus vertical scrollbar */ /* Horizontal scrollbar wrapper - bottom, full width minus vertical scrollbar */
.dt2-scrollbars-horizontal-wrapper { .dt2-scrollbars-horizontal-wrapper {
left: 0; left: 0;

6
src/myfasthtml/assets/datagrid/datagrid.js
View File

@@ -225,6 +225,7 @@ function initDataGridScrollbars(gridId) {
// PHASE 3: Write all DOM properties (already in RAF) // PHASE 3: Write all DOM properties (already in RAF)
verticalWrapper.style.display = isVerticalRequired ? "block" : "none"; verticalWrapper.style.display = isVerticalRequired ? "block" : "none";
horizontalWrapper.style.display = isHorizontalRequired ? "block" : "none"; horizontalWrapper.style.display = isHorizontalRequired ? "block" : "none";
table.classList.toggle("dt2-has-hscroll", isHorizontalRequired && isVerticalRequired);
verticalScrollbar.style.height = `${scrollbarHeight}px`; verticalScrollbar.style.height = `${scrollbarHeight}px`;
horizontalScrollbar.style.width = `${scrollbarWidth}px`; horizontalScrollbar.style.width = `${scrollbarWidth}px`;
verticalScrollbar.style.top = `${verticalTop}px`; verticalScrollbar.style.top = `${verticalTop}px`;
@@ -631,7 +632,10 @@ function moveColumn(table, sourceColId, targetColId) {
function updateDatagridSelection(datagridId) { function updateDatagridSelection(datagridId) {
const selectionManager = document.getElementById(`tsm_${datagridId}`); const selectionManager = document.getElementById(`tsm_${datagridId}`);
if (!selectionManager) return; if (!selectionManager) {
console.warn(`DataGrid selection manager not found for ${datagridId}`);
return;
}
// Re-enable tooltips after drag // Re-enable tooltips after drag
const wrapper = document.getElementById(`tw_${datagridId}`); const wrapper = document.getElementById(`tw_${datagridId}`);