gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix multiselect label column collapse and restore control offset

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-25 08:53:56 +02:00
parent 730cc137bb
commit 5da2203517
2 changed files with 20 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/multiselektions-pulldown.html
+8 -2
View File
@@ -397,13 +397,17 @@
let maxWidth = 0; let maxWidth = 0;
labels.forEach((label) => { labels.forEach((label) => {
const width = Math.ceil(label.getBoundingClientRect().width); const width = Math.ceil(label.scrollWidth || label.getBoundingClientRect().width);
if (width > maxWidth) { if (width > maxWidth) {
maxWidth = width; maxWidth = width;
} }
}); });
panel.style.setProperty('--sg-multiselect-label-column-width', `${maxWidth}px`); if (maxWidth > 0) {
panel.style.setProperty('--sg-multiselect-label-column-width', `${maxWidth}px`);
} else {
panel.style.removeProperty('--sg-multiselect-label-column-width');
}
}); });
}; };
@@ -522,6 +526,8 @@
return; return;
} }
updateMultiselectLabelAlignment();
const panel = demo.querySelector('.sg-pulldown-panel'); const panel = demo.querySelector('.sg-pulldown-panel');
if (!panel) { if (!panel) {
return; return;
styles/25-patterns-form-sections.css
+12
View File
@@ -77,6 +77,12 @@
--sg-multiselect-label-column-width: max-content; --sg-multiselect-label-column-width: max-content;
} }
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] > .sg-label,
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label,
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label {
white-space: nowrap;
}
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] { .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {
display: grid; display: grid;
grid-template-columns: max-content var(--sg-multiselect-label-column-width) minmax(0, 1fr) auto; grid-template-columns: max-content var(--sg-multiselect-label-column-width) minmax(0, 1fr) auto;
@@ -162,6 +168,12 @@
row-gap: var(--spacing-small); row-gap: var(--spacing-small);
} }
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] > .sg-label,
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label,
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label {
white-space: normal;
}
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-mode-toggle { .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-mode-toggle {
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;