diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_html.html b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_html.html
index 7bd5624801eead5c40289bfb286934244362398b..4cf380bb455900882a1c5048bd78ea494b11f94c 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_html.html
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_html.html
@@ -12,7 +12,7 @@
</head>
<body>
<div class="ui-field-contain">
- <label> <span></span></label>
+ <label></label>
<div></div>
</div>
</body>
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_html.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_html.xml
index 7b4a8929a7557222ddd7a0a9670418bcd2240a05..be49cc83cc95616598ea4918c9caecbbe6d81af2 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_html.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_html.xml
@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>serial</string> </key>
- <value> <string>954.24197.36337.41506</string> </value>
+ <value> <string>961.42413.53044.57736</string> </value>
</item>
<item>
<key> <string>state</string> </key>
@@ -252,7 +252,7 @@
</tuple>
<state>
<tuple>
- <float>1475585351.18</float>
+ <float>1503674612.29</float>
<string>UTC</string>
</tuple>
</state>
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.js
index 91ef33fc081ec78c978c8a0cd7b2375c5105e616..9bbe1191caaa5e87c2f5c5ce8356a2046548ef1f 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.js
@@ -20,16 +20,14 @@
.setState({
label_text: '',
error_text: '',
- label: true,
+ label: true, // the label element is already present in the HTML template
css_class: ''
})
.ready(function () {
return this.changeState({
- label_element: this.element.querySelector('label'),
- label_text_element: this.element.querySelector('label').firstChild,
- error_element: this.element.querySelector('span'),
- container_element: this.element.querySelector('div')
+ container_element: this.element.querySelector('div'), // matches the closest div
+ label_element: this.element.querySelector('label')
});
})
@@ -44,6 +42,11 @@
hidden: options.field_json.hidden,
css_class: options.field_json.css_class
};
+ // RenderJS would overwrite default value with empty variables :-(
+ // So we have to mitigate this behaviour
+ if (state_dict.label === undefined) {
+ state_dict.label = true;
+ }
return this.changeState(state_dict);
})
@@ -58,7 +61,7 @@
}
if (modification_dict.hasOwnProperty('label_text')) {
- this.state.label_text_element.textContent = this.state.label_text;
+ this.state.label_element.textContent = this.state.label_text;
}
this.state.label_element.setAttribute('for', gadget.state.scope);
@@ -67,11 +70,16 @@
}
if (modification_dict.hasOwnProperty('error_text')) {
- this.state.error_element.textContent = "";
+ // first remove old errors
+ span = this.state.container_element.querySelector('span');
+ if (span) {
+ this.state.container_element.removeChild(span);
+ }
+ // display new error if present
if (this.state.error_text) {
span = document.createElement('span');
span.textContent = this.state.error_text;
- this.state.error_element.appendChild(span);
+ this.state.container_element.appendChild(span);
}
}
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
index 0a10626d552809c60cfc06d18ae0bfd525b398ee..1dff9ebcf63440e536658ceae03f41adbfe8364d 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
@@ -932,7 +932,6 @@ div[data-gadget-scope='header'] .ui-header ul {
}
}
*/
- /* form validation (assuming label>span is used) */
}
.gadget-content div[data-gadget-scope='m'] {
animation: fadein 0.2s ease-out;
@@ -1069,26 +1068,26 @@ div[data-gadget-scope='header'] .ui-header ul {
flex: 7;
}
}
-.gadget-content form label {
+.gadget-content form .ui-field-contain {
position: relative;
}
-.gadget-content form label span span {
+.gadget-content form .ui-field-contain > span {
animation: fadein 0.2s ease-out;
}
@media not screen and (max-width: 85em), only screen and (min-width: 45em) and (max-width: 85em) {
- .gadget-content form label span span {
+ .gadget-content form .ui-field-contain > span {
background-color: #FF6600;
color: #f8fff3;
- left: 110%;
+ left: 25%;
position: absolute;
- bottom: 130%;
+ bottom: 110%;
white-space: pre;
padding: 6pt;
border-radius: 0.325em;
width: auto;
z-index: 1001;
}
- .gadget-content form label span span:before {
+ .gadget-content form .ui-field-contain > span:before {
position: absolute;
top: 100%;
left: 2em;
@@ -1100,7 +1099,7 @@ div[data-gadget-scope='header'] .ui-header ul {
}
}
@media not screen and (min-width: 45em) {
- .gadget-content form label span span {
+ .gadget-content form .ui-field-contain > span {
margin-left: 6pt;
color: #FF6600;
}
diff --git a/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt b/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
index 1d89b4be5e7455a121b5f6fa93d748c63792934a..c8793b908325fa9ffc028b3dad1e4ea551b46363 100644
--- a/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
+++ b/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
@@ -1247,19 +1247,19 @@ div[data-gadget-scope='header'] .ui-header {
}
*/
- /* form validation (assuming label>span is used) */
- form label {
+ form .ui-field-contain {
+ // relative for displaying popups with errors
position: relative;
- span span {
+ & > span {
animation: fadein @transition-timing;
@media @desktop, @tablet {
background-color: @coloraccent;
color: @colorsubheaderlink;
- left: 110%;
+ left: 25%;
position: absolute;
- bottom: 130%;
+ bottom: 110%;
white-space: pre;
padding: @margin-size;
border-radius: @border-radius;