Backbone with Webix

Site and Services
1

Hi.

I am trying to get my WebixView to render full width and full height. The only way I have been able to do this is by using { el: ‘body’ } on my backbone view. The problem with this approach is that it removes everything else in the body. I have tags inside the body so that isn’t ideal.

If I use { el: ‘#app’ } inside my WebixView, the view still renders, however it’s height is only the height of the actual content (about 200px)… and, the width is fixed, so when I resize the window down, the width of the view doesn’t change. #app is a child of the body.

Is there something I am doing wrong here?

var app = WebixView.extend({

       el: 'body', // el: '#app',

	config: {
		isolate: true,
		type: 'wide',
		rows: [
			{
				view: "toolbar",
				elements: [
					{
						view: "button",
						type: "icon",
						icon: "bars",
						width: 37,
						align: "left",
						css: "app_button",
						click: function(){
							//$$("mainmenu").toggle();
						}
					},
					{
						view: 'label',
						label: logo
					},
					{},
					{
						view: 'button',
						type: 'icon',
						width: 45,
						css: 'app_button',
						icon: 'envelope-o',
						badge:4
					},
					{
						view: 'button',
						type: 'icon',
						width: 45,
						css: 'app_button',
						icon: 'bell-o',
						badge:10
					}
				]
			},
			{
				cols:[
					{
						view: 'sidebar',
						id: 'mainmenu',
						data: menu_data,
						on:{
							onAfterSelect: function(id){
								webix.message("Selected: "+this.getItem(id).value)
							}
						}
					},
					{
						template: '',
						id: 'content'
					}
				]
			}
		]
	}

      .....
});

new app().render();
2

When webix based UI initialized inside of container, it size self to the container ( UI reads actual size of container, and sets same size for widgets ).

As HTML doesn’t provide a way to detect resize of HTML container, UI will not adjust self automatically on resize of HTML container, you can force it by adding something like next

webix.event(window, "resize", () => $$("top_element_id").resize())