diff --git a/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts b/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts index 7fe5a43fc8..be7d6ed12c 100644 --- a/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts +++ b/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts @@ -22,6 +22,8 @@ export declare class Et2InputWidgetInterface readonly : boolean; protected value : string | number | Object; + public required : boolean; + public set_value(any) : void; public get_value() : any; @@ -67,6 +69,7 @@ const Et2InputWidgetMixin = >(superclass : T) .input-group__container > .input-group__input ::slotted(.form-control) { width: 100%; } + ` ]; } @@ -171,14 +174,11 @@ const Et2InputWidgetMixin = >(superclass : T) // required changed, add / remove validator if(changedProperties.has('required')) { - // Remove class - this.classList.remove("et2_required") // Remove all existing Required validators (avoids duplicates) this.validators = (this.validators || []).filter((validator) => validator instanceof Required) if(this.required) { this.validators.push(new Required()); - this.classList.add("et2_required"); } } } diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css index 9c4af309bd..57032c071c 100644 --- a/api/templates/default/etemplate2.css +++ b/api/templates/default/etemplate2.css @@ -82,6 +82,7 @@ display: flex; align-items: center; gap: 1em; + flex-wrap: wrap; } ::part(form-control-label) { @@ -93,6 +94,11 @@ flex: 1 1 auto; } +::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; @@ -1982,7 +1988,7 @@ img.vfsMimeIcon[src*="/etemplate/thumbnail.php"] { /** * Validation */ -.et2_required, [required] { +.et2_required, .et2_required::part(base), [required]::part(base) { background-color: #ffffd0; } @@ -2106,6 +2112,11 @@ div.message.floating, lion-validation-feedback[type] { left: 0px; } +lion-validation-feedback[type] { + top: initial; + margin-top: calc(-0.5 * var(--sl-input-height-medium)); +} + .message.validation_error, lion-validation-feedback[type="error"] { color: var(--error-color); border-color: var(--error-color); diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index eed0f274fa..f12f7186c7 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -603,7 +603,7 @@ * Validation */ .et2_required, - [required] { + [required]::part(base) { background-color: #FFDD73; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; @@ -5590,8 +5590,13 @@ span.overlayContainer img.overlay { #egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container .chzn-results { max-height: none; } -#egw_fw_topmenu_info_items #topmenu_info_quick_add select#quick_add_selectbox { - visibility: hidden; +#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox { + height: 0px; + float: left; + display: inline-block; +} +#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(form-control-input) { + border: none !important; } #egw_fw_topmenu_info_items img#topmenu_info_error { width: 16px; diff --git a/pixelegg/css/monochrome.css b/pixelegg/css/monochrome.css index 9cee259913..98b1cb7122 100644 --- a/pixelegg/css/monochrome.css +++ b/pixelegg/css/monochrome.css @@ -583,7 +583,7 @@ * Validation */ .et2_required, - [required] { + [required]::part(base) { background-color: #FFDD73; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; @@ -5570,8 +5570,13 @@ span.overlayContainer img.overlay { #egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container .chzn-results { max-height: none; } -#egw_fw_topmenu_info_items #topmenu_info_quick_add select#quick_add_selectbox { - visibility: hidden; +#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox { + height: 0px; + float: left; + display: inline-block; +} +#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(form-control-input) { + border: none !important; } #egw_fw_topmenu_info_items img#topmenu_info_error { width: 16px; diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index 3189f0a3c2..bb54d2a71c 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -593,7 +593,7 @@ * Validation */ .et2_required, - [required] { + [required]::part(base) { background-color: #FFDD73; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; diff --git a/pixelegg/less/etemplate2.less b/pixelegg/less/etemplate2.less index baea214724..608b69e870 100755 --- a/pixelegg/less/etemplate2.less +++ b/pixelegg/less/etemplate2.less @@ -437,7 +437,7 @@ div.et2_file input.et2_file_upload{ /** * Validation */ -.et2_required, [required] { +.et2_required, [required]::part(base) { background-color: @egw_color_1_e; .border_radius (3px, 3px ,3px ,3px ); } diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index af665b7125..094c1edbc0 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -614,7 +614,7 @@ * Validation */ .et2_required, - [required] { + [required]::part(base) { background-color: #FFDD73; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; @@ -5601,8 +5601,13 @@ span.overlayContainer img.overlay { #egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container .chzn-results { max-height: none; } -#egw_fw_topmenu_info_items #topmenu_info_quick_add select#quick_add_selectbox { - visibility: hidden; +#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox { + height: 0px; + float: left; + display: inline-block; +} +#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(form-control-input) { + border: none !important; } #egw_fw_topmenu_info_items img#topmenu_info_error { width: 16px;