Page History
...
A splitpane could have 2 properties instead of that containedForm property shown above like "left" and "right" that then shows left and right a form.
Extra properties
The form component gets from the system on its formcomponent property value a few extra properties that it can use to show the elements.:
formHeight: the height of the contained form.
formWidht: the height of the contained form.
absoluteLayout: Is the contained form an absolute layout form (false means it is a reponsive form)
Below is the example how the bootstrap (reponsive) version of a form component implemenation works:
So if a height or widht is given then it will generate everything inside a div, with that specific height. If no height is given but the containedForm is in absoluteLayout it will use the form height and width to generate that wrapping div.
Code Block | ||
---|---|---|
| ||
function createContent() {
$element.empty();
var newValue = $scope.model.containedForm;
if (newValue) {
var elements = $scope.svyServoyapi.getFormComponentElements("containedForm", newValue);
var height = $scope.model.height;
var width = $scope.model.width;
// if the form of the form component is a absolute layout
// make sure to get the height and width from that form if our own height/widht are not set.
// so that an absolute form is always inside a div that is generated below
if (newValue.absoluteLayout) {
if (!height) height = newValue.formHeight;
if (!width) width = newValue.formWidth;
}
if (height || width) {
var template = "<div style='position:relative;";
if (height) template += "height:" +height + "px;"
if (width) template += "width:" +width + "px;"
template += "'";
if ($scope.model.styleClass) template += " class='" +$scope.model.styleClass + "'";
template += "></div>";
var div = $compile(template)($scope);
div.append(elements);
$element.append(div);
}
else $element.append(elements);
}
else {
$element.html("<div>FormComponentContainer, select a form</div>");
}
} |