Center an form on the page

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

https://github.com/webix-hub/jet-start/blob/php/sources/views/login.js

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

Is that really the "official" way of centering something with webix? :-) 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.

Tagged:

Comments

  • 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 https://www.w3schools.com/css/css_align.asp

  • 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.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!