Center an form on the page

I want to show a login form at the center of my layout. I found this example:

const ui = { rows: [ {}, { cols:[ {}, login_form, {}]}, {} ] };

Is that really the “official” way of centering something with webix? :slight_smile: I already found out that I actually NEED the outer {} Otherwise my form will always be as large as the containing div. But I want my form to be smaller and centered.

You can set css property of form config object like this: css: { margin:“auto” }
Snippet here: https://webix.com/snippet/45ac366b

If you want to know more about center element. See CSS Layout - Horizontal & Vertical Align

Is that really the “official” way of centering

Yes. A spacer provides the dynamic gap within the UI which supports all webix sizing properties.
For example, such structure will be useful in SPA where views are placed in a single webix.ui, which means they are not divided by HTML containers.

CSS will be valid for the container of the UI.

But please note that custom CSS sizing/positioning for the views within the Webix layout may be eliminated or cause conflict with the inner sizing logic of Webix.

@Doogie: yes, it may sound strange, but there’s no attribute to “center” a UI element in its parent. Webix uses those spacers { }.

Here’s a sample showing how to center horizontally a Datatable. The key is to make sure the centered element defines its own width. In the case of the Datatable, that meant setting widths for the columns, instead of using fillspace: true.

https://snippet.webix.com/1f1mqzj5
trying center horizontally and vertically