extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-26 18:03:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix some CSS / layout issues with labels

Browse Source 
- Fix label nowrap stopped working
- Fix et2-label-fixed stopped working
This commit is contained in:
nathan 2024-04-23 14:02:58 -06:00
parent faf6a21836
commit b34e6905ce
2 changed files with 51 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
api/js/etemplate/Et2Select/Et2Select.ts
View File

@ -108,6 +108,9 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
--icon-width: 20px;
}
.form-control--has-label::part(form-control-label) {
margin-right: var(--sl-spacing-medium);
}
::slotted(img), img {
vertical-align: middle;
@ -1037,7 +1040,10 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
return html`
${this._styleTemplate()}
<sl-select
exportparts="prefix, tags, display-input, expand-icon, combobox, combobox:base, listbox, option"
class=${classMap({
"form-control--has-label": this.label !== ""
})}
exportparts="form-control-label, prefix, tags, display-input, expand-icon, combobox, combobox:base, listbox, option"
label=${this.label}
placeholder=${this.placeholder || (this.multiple && this.emptyLabel ? this.emptyLabel : "")}
?multiple=${this.multiple}

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

@ -107,52 +107,58 @@ const Et2WidgetMixin = <T extends Constructor>(superClass : T) =>
return [
...(super.styles ? (Array.isArray(super.styles) ? super.styles : [super.styles]) : []),
css`
:host([disabled]) {
display: none;
}
/* CSS to align internal inputs according to box alignment */
:host([align="center"]) .input-group__input {
justify-content: center;
}
:host([align="right"]) .input-group__input {
justify-content: flex-end;
}
:host([disabled]) {
display: none;
}
/* Put widget label to the left of the widget */
/* CSS to align internal inputs according to box alignment */
::part(form-control) {
display: flex;
align-items: center;
flex-wrap: wrap;
}
:host([align="center"]) .input-group__input {
justify-content: center;
}
::part(form-control-label) {
flex: 0 0 auto;
white-space: normal;
}
:host([align="right"]) .input-group__input {
justify-content: flex-end;
}
::part(form-control-input) {
flex: 1 1 auto;
position: relative;
max-width: 100%;
}
/* Put widget label to the left of the widget */
::part(form-control-help-text) {
flex-basis: 100%;
position: relative;
}
::part(form-control), .form-control {
display: flex;
align-items: center;
flex-wrap: wrap;
}
/* Use .et2-label-fixed class to give fixed label size */
::part(form-control-label), .form-control-label {
flex: 0 0 auto;
white-space: normal;
}
:host(.et2-label-fixed)::part(form-control-label) {
width: initial;
width: var(--label-width, 8em);
}
.form-control--has-label .form-control-label {
margin-right: var(--sl-spacing-medium);
}
:host(.et2-label-fixed)::part(form-control-help-text) {
left: calc(var(--sl-spacing-medium) + var(--label-width, 8em));
}
::part(form-control-input), .form-control-input {
flex: 1 1 auto;
position: relative;
max-width: 100%;
}
::part(form-control-help-text), .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), :host(.et2-label-fixed) .form-control-label {
width: initial;
width: var(--label-width, 8em);
}
:host(.et2-label-fixed)::part(form-control-help-text), :host(.et2-label-fixed) .form-control-help-text {
left: calc(var(--sl-spacing-medium) + var(--label-width, 8em));
}
`];
}