FormField: support horizontal alignment inside FormFieldMenus
FormFieldMenu.js:
FormFieldMenu does not have a logical grid, therefore the "gridData" has
to be set manually according to "gridDataHints". This must happen before
rendering the field, otherwise the field will not pick up the desired
alignment (because the "gridData" property still contains the default
values).
FormField.js:
Because some inner elements are positioned absolutely (e.g. the clear
icon), the form field layout must be invalidated after the inner
alignment classes have been updated. Otherwise, dynamically toggling the
"gridDataHints.horizontalAlignment" property would not be rendered
correctly.
FormFieldLayout.js:
The "gridDataHints.horizontalAlignment" property affects the position of
the clear icon. When the value is changed, the corresponding opposite
position has to be cleared (only one of the CSS properties "left" or
"right" must be present).
233678
Change-Id: Ie183b00a1520ffff514db02f531e3aee92051449
Reviewed-on: https://git.eclipse.org/r/141065
Tested-by: CI Bot
Reviewed-by: Claudio Guglielmo <claudio.guglielmo@bsiag.com>
diff --git a/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/FormField.js b/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/FormField.js
index 59f54e5..df9810f 100644
--- a/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/FormField.js
+++ b/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/FormField.js
@@ -1015,6 +1015,8 @@
var vAlign = gridData.verticalAlignment;
$field.addClass(vAlign < 0 ? 'valign-top' : (vAlign > 0 ? 'valign-bottom' : 'valign-middle'));
}
+ // Alignment might have affected inner elements (e.g. clear icon)
+ this.invalidateLayout();
}
};
diff --git a/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/FormFieldLayout.js b/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/FormFieldLayout.js
index 29897d9..8d4eb25 100644
--- a/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/FormFieldLayout.js
+++ b/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/FormFieldLayout.js
@@ -360,11 +360,13 @@
if (formField instanceof scout.BasicField && formField.gridData.horizontalAlignment > 0) {
formField.$clearIcon
.cssLeft(fieldBounds.x)
+ .cssRight('')
.cssTop(fieldBounds.y)
.cssHeight(height)
.cssLineHeight(height);
} else {
formField.$clearIcon
+ .cssLeft('')
.cssRight(right)
.cssTop(fieldBounds.y)
.cssHeight(height)
diff --git a/org.eclipse.scout.rt.ui.html/src/main/js/scout/menu/form/field/FormFieldMenu.js b/org.eclipse.scout.rt.ui.html/src/main/js/scout/menu/form/field/FormFieldMenu.js
index b38ea54..04d4a11 100644
--- a/org.eclipse.scout.rt.ui.html/src/main/js/scout/menu/form/field/FormFieldMenu.js
+++ b/org.eclipse.scout.rt.ui.html/src/main/js/scout/menu/form/field/FormFieldMenu.js
@@ -47,11 +47,13 @@
scout.FormFieldMenu.prototype._renderField = function() {
if (this.field) {
- this.field.render(this.$container);
- this.formFieldMenu = true;
+ // Use gridDataHints as "computed" gridData property, because FormFieldMenu
+ // does not have a logical grid (see FormField._updateElementInnerAlignment()).
if (this.field.gridDataHints) {
this.field.gridData = scout.GridData.createFromHints(this.field, 1);
}
+
+ this.field.render(this.$container);
var layoutData = new scout.LogicalGridData(this.field);
layoutData.validate();
this.field.setLayoutData(layoutData);
