Ok so I have abandoned the data- attribute approach:
<div webix-ui="formConfig"></div>
<div webix-ui view="form" id="htmlForm">
<div view="rows">
<div view="cols" >
<div webix-ui="perfilNameTextConfig" ></div>
<div webix-ui="cloneablePerfilesComboConfig" webix-data="cloneablePerfiles" ></div>
<div webix-ui="clearCreatePerfilButtonConfig" ></div>
</div>
<div view="cols" >
<div webix-ui="createPerfilButtonConfig"></div>
</div>
</div>
</div>
<div webix-ui view="window" id="htmlWindow" modal="true" height="900" width="1000" position="center" move="true">
<div view="head">
<div view="toolbar" margin="-4" stack="cols">
<div view="label" label="{{vm.translations.NameLabel}}"></div>
<div view="icon" icon="times-circle" click="hideHtmlWindow()"></div>
</div>
</div>
<div view="body">
<div view="rows">
<div view="cols">
<div webix-ui="perfilNameTextConfigW"></div>
<div webix-ui="cloneablePerfilesComboConfigW" webix-data="cloneablePerfiles"></div>
<div webix-ui="clearCreatePerfilButtonConfigW"></div>
</div>
</div>
</div>
</div>
webix-ui=“formConfig” is my original form which components adjust just fine:
function configureForm() {
$scope.formConfig = {
view: "form",
id: "originalForm",
elements: [
{
cols: [
{ id: "perfilName", view: "text", label: vm.translations.NameLabel },
{
view: "combo",
id: 'cloneablePerfiles',
label: vm.translations.cloneFromPerfilButton,
options: $scope.cloneablePerfiles
},
{ view: "button", type: "icon", icon: "refresh", click: clearCreatePerfilForm }
]
},
{
cols: [
{ image: "/images/imagenes_aplicacion/Guardar.png", view: "button", type: "imageTop", label: vm.translations.createPerfilButton, click: createPerfil }
]
}
]
};
}
webix-ui view=“form” id=“htmlForm” is my target form, it shows its components BUT the rows do not auto adjust their height to the minimum required, and borders are displayed. How can I define “htmlForm” to show exactly the same as “originalForm”?
Also, all 3 components in the popup window have 0 width when shown, how do I define the window body content in html?
Many Thanks