extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-02-02 03:19:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix widget label positioning

Browse Source
This commit is contained in:
nathan 2023-09-14 11:56:25 -06:00
parent fade177f10
commit 01375295fe
2 changed files with 35 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
api/js/etemplate/Et2Widget/Et2Widget.ts
View File

@ -103,6 +103,41 @@ const Et2WidgetMixin = <T extends Constructor>(superClass : T) =>
:host([align="right"]) .input-group__input { :host([align="right"]) .input-group__input {
justify-content: flex-end; justify-content: flex-end;
} }
/* Put widget label to the left of the widget */
::part(form-control) {
display: flex;
align-items: center;
flex-wrap: wrap;
}
::part(form-control-label) {
flex: 0 0 auto;
white-space: normal;
}
::part(form-control-input) {
flex: 1 1 auto;
position: relative;
max-width: 100%;
}
::part(form-control-help-text) {
flex-basis: 100%;
position: relative;
}
/* Use .et2-label-fixed class to give fixed label size */
:host(.et2-label-fixed)::part(form-control-label) {
width: initial;
width: var(--label-width, 8em);
}
:host(.et2-label-fixed)::part(form-control-help-text) {
left: calc(var(--sl-spacing-medium) + var(--label-width, 8em));
}
`]; `];
} }

31
api/templates/default/etemplate2.css
View File

@ -78,37 +78,6 @@
display: none; display: none;
} }
/* Put widget label to the left of the widget, with fixed width */
::part(form-control) {
display: flex;
align-items: center;
flex-wrap: wrap;
}
::part(form-control-label) {
flex: 0 0 auto;
white-space: normal;
}
::part(form-control-input) {
flex: 1 1 auto;
position: relative;
max-width: 100%;
}
::part(form-control-help-text) {
flex-basis: 100%;
position: relative;
}
/* Use .et2-label-fixed class to give fixed label size */
.et2-label-fixed::part(form-control-label) {
width: initial;
width: var(--label-width, 8em);
}
.et2-label-fixed::part(form-control-help-text) {
left: calc(var(--sl-spacing-medium) + var(--label-width,8em));
}
/** /**
* VBox widget * VBox widget