Toolbar occupies more space when its size

Webix JS
#1

Hi,

Toolbar occupies more space when its size.
In the snippet template w/ “MainView” is drawn way down;
Snippet: http://webix.com/snippet/53303dc8

Essentially the idea is that view in left side occupies whole left side,
Toolbar occupies only its size and MainView occupies the rest.

How can it be achieved?
in http://docs.webix.com/desktop__dimensions.html#autosizing
“If you define autoheight as true the height of layout rows will be adjusted to their contents.”
but it does not happen, What am I missing?

Thank you

#2

It’s all about embedding one webix view in another one. It’s initialized by a separate constructor in a container formed by another webix.ui.

var toolbar = webix.ui(toolbarConfig, elem[0]);

while the whole app is inited with another one in html markup.

Autosizing will work properly if you place the whole application config into one and the same webix.ui. Otherwise, resizing functions for the toolbar are needed.

We’ve discussed it;) http://forum.webix.com/discussion/1913/toolbar-inside-layout-does-not-adjust-its-size#Item_4

#3

Helga,

Here:http://webix.com/snippet/a536b540
I used all the events to resize and it does not make a difference.
I am still not clear on “place the whole application config into one and the same webix.ui.”

Per what you are saying if I create main structure from html, how can I add new view or change existing one if I am to use webix.ui then autosizing is screwed again?

I’ll create everything from JavaScript to give it a try.

If you can, please provide small example how to create main structure from html and add new view while keeping autosizing operational.

#4

You sample works for me as expected - toolbar is resized and adjusted to the right view size.

But do please check the sample I made http://webix.com/snippet/ef79f03c.
There’s only one webix.ui constructor that initializes the application:

<div ng-app="webixApp" ng-controller="webixCtrl"  style="height:100%;width:100%;" 
webix-ui type="clean" id="topview">

And menu replaces a placeholder label view in the toolbar that is instantiated during the initialization of the whole app. Webix.ui constructor is now used for replacement, not for initialization. All resizing is done automatically now.

Maybe I simplified or altered your functionality, but hope I showed you the idea.

#5

Helga,

Thank you for your sample.

Here is what my app is doing: http://webix.com/snippet/3d160a3e
as you see datatable in the main view is created as angularjs directive. (does not occupy whole available space :slight_smile: )
The reason I am using directives is because I want to be able to use any component not just webix component.
Please take a look, what is good practice for my needs?

Thank you

#6

Hello,

Not any view will occupy the whole available space, but only one that doesn’t feature fixed sizing. And the datatable in your configuration features. When using autoConfig property the width of each column is the default 50px. The same happens when you don’t define width in column configuration.

To make the datatable autosize, at least one column should have the fillspace property:

{id:"col1", header:"col1", fillspace:true}

http://webix.com/snippet/6734c177

A good practice is to use Webix way to replace (or add and remove) views for Webix components, as we discussed earlier. Only for non-webix views it makes sense to resort to initializing them by a separate webix.ui.

#7

Helga,

I understand your recommendation, what was confusing to me is that samples and specifically angular js integration article does not mention anything about single web_ix constructor usage.
Angularjs integration http://docs.webix.com/desktop__angular_controllers.html
and angular sample show examples of predefined views.

In attempt to use single web_ix constructor how do you recommend to use

or what to substitute it with?