Webix Jet display truncated by subview

Webix JS
#1

I got the Jet demo code. I made a simple form (login.js):

define([], function() {

  var ui = {
    view: "form",
    id: "loginForm",
    elements: [
      {view: "text", label: "Email Address"},
      {view: "text", label: "Password"}
    ]
  };

  return {
    $ui: ui
  }

});

I added it to the menu in top.js:

		{
			value: "Login",
			id: "login",
			href: "#!/top/logon",
			icon: "user"
		}

When I select it the form appears but the sidebar menu is truncated to the same size as the form. You can only see the top half of the “Data” option. Everything works, just looks like my login form isn’t filling the subview.

return {
  $ui: ui,
  $$oninit: function(view) {
    view.adjust();
  }

Had no effect. Neither did

define([], function() {

  var ui = {
    view: "form",
    id: "loginForm",
    elements: [
      {view: "text", label: "Email Address"},
      {view: "text", label: "Password"}
    ],
    autoheight: true
  };

  return {
    $ui: ui
  }

});

The only thing that “fixes” it is setting the form’s height to a hard value.

So my question is, why don’t start.js and data.js also need this?

#2

Hello,

You need to add a Spacer element to your form after all its fields:

 elements: [
      {view: "text", label: "Email Address"},
      {view: "text", label: "Password"},
      {} //spacer
]

The spacer takes the rest of available space and, hence, adjusts the form to the screen size.

The “start.js” view contains the Template, which takes the whole available space unless some fixed dimensions are provided. The same is true for the Datatable in the “data.js” view. The Datatable takes the whole space even if the number of rows is smaller than the page may contain.

#3

Cool, thanks.