Add CSS classes 'label-on-left' & 'label-inline' to put widget label in column on the left

Use 'label-inline' with 'label-on-left' to remove the white-space for an inline label
This commit is contained in:
nathan 2022-07-19 15:30:34 -06:00
parent 3b147eaa49
commit 1cc63b69ca

View File

@ -76,6 +76,28 @@
display: none;
}
/* Put widget label to the left of the widget, with fixed width */
.label-on-left::part(form-control) {
display: flex;
align-items: center;
gap: 1em;
}
.label-on-left::part(form-control-label) {
flex: 0 0 auto;
width: var(--width, 8em);
white-space: normal;
}
.label-on-left::part(form-control-input) {
flex: 1 1 auto;
}
/* Use .label-inline with .label-on-left to remove fixed label space */
.label-inline::part(form-control-label) {
width: initial;
}
/**
* VBox widget
*/