Метод show() отображает только первый элемент rows

Здравствуйте! Есть такой код, в rows определена форма для ввода логина и пароля и рабочая область.

При инициализации рабочая область скрыта, показывается только форма. После успешной аутентификации, я скрывают форму и показываю рабочую область:

$$(‘auth’).hide();
$$(‘oper’).show;

Но у меня отображается только первый элемент rows - view: “toolbar”
все что дальше в cols не показывается. Если же изменить размеры браузера, то эти элементы появляются.

Как быть?

webix.ui({
		rows: [{
			id: 'auth',
			hidden: false,
			rows: [{}, {
				cols: [{}, {
					view: "form",
					width: 350, 
       				elements:[
       					{id: 'form-login-fldLogin',    view: "text",   label: "Логин",  labelWidth: 100, value: adminLogin},
       					{id: 'form-login-fldPassword', view: "text",   label: "Пароль", labelWidth: 100, type: "password"},
       					{id: 'form-login-btnEnter',    view: "button", label: "Войти",  inputWidth: 110, align: "center", click: function(id, e){
       						login();
       					}}
      				]
				}, {}]	
			}, {}]
		}, {
			id: 'oper',
			hidden: true,
			rows: [{
				view:    "toolbar",
				padding: 3,
				elements: [{
					view: "button",
					type: "icon",
					icon: "navicon",
					width: 45,
					align: "left",
					css: "app_button",
					click: function() {
						$$("$sidebar1").toggle()
					}
				}, {
					view: "label", 
					label: "Оператор"
				}, {}, {
					view: "button",
					type: "icon",
					width: 45,
					css: "app_button",
					icon: "unlock-alt"
				}]
			}, {
				cols:[{
					view: "sidebar",
					data: menu_data,
					width: 300,
					on: {
						onAfterSelect: function(id) {
							// this.getItem(id).value
							webix.message("Selected: " + id);
						}
					}
				}, {
					view:"datatable", 
   					columns:[{
   						id:     'doc-num',
   						header: 'Номер',
   						width:  100
    				}, {
   						id:     "doc-date",
   						header: "Дата",
   						width:  100
   					}, {
   						id:     'doc-summ',
   						header: 'Сумма',
    					width:  100
   					}, {
   						id:     'doc-payer',
   						header: 'Плательщик',
   						width:  300
   					}, {
    					id:     'doc-rcpt',
   						header: 'Получатель',
   						width:  300
   					}, {
   						id:     'doc-status',
   						header: 'Статус',
    					width:  120
   					}, {
   						id:     'doc-time',
   						header: 'Время',
   						width:  120
   					}]
				}]
			}]
		}]
	});

Здравствуйте,

элементы рабочей области не имеют заданной высоты, кроме тулбара, поэтому они и не отрисовываются по .show(). Чтобы сработала автоматическая простановка размеров, нужно после show() вызвать adjust():

http://webix.com/snippet/9cfb83cf

Возможно, логичнее было бы отображать форму в окне (Webix window), а рабочую область в layout: http://webix.com/snippet/fd5faad2

Спасибо за ответ! :slight_smile: