Layout: resize row heights

Webix JS
1

Hi, I’m new here and I’m evaluating Webix to renovate the interface of a web app.

I’m using this Layout example: http://webix.com/demo/layout/basic-layout/

What I need is resize the height of row1 without also changing the height of row2 (of course, doing this will change the overall height), but I can’t find in the docs if this is possible.

Thanks in advance!

2

Yep, it possible, you need to wrap the bottom part in separate layout to have the expected result

http://webix.com/snippet/357c109b

3

Good! :smiley:

And to prevent the last row gets hidden, I added this style in both layouts with css config
http://docs.webix.com/api__link__ui.view_css_config.html

.auto_height { height: auto !important; }

Is this correct or there is a better way to do this?

4

It is a bit of hack, but will work.

Another approach is to use minHeight to bottom view. In such case it will be always visible

http://webix.com/snippet/8eac1105

5

But now the bottom view gets increased when top view is decreased. I’m trying combinations of heigth, min and max, but no luck :frowning:
Lets back to the hack!

By the way, I’m working on a CMS where admins can modify the visual design of the front end site and I’m using the Layout component to represent areas of the website (top bar, header, menu, main content, footer). That’s why every pixel is important!

Now I have to include colorpickers, file uploaders, and so on… Expect more questions soon… ^^