Change of auto-height behavior after upgrading from v4.2.4 to v4.3.0

Webix JS
#1

The auto-height (height: ‘auto’) feature has changed it’s behavior after upgrading from version 4.2.4 to version 4.3.0.

Here is my layout used to look like before upgrade: 2017-06-18_13-38-39.png — Yandex.Disk

Here is how it looks now: 2017-06-18_13-39-37.png — Yandex.Disk

Here is snippet with sample source code: https://webix.com/snippet/b4d02a51

What am I doing wrong? Please help me setup it right.
Thank you!

P.S. I wrote in English because I thought than this information can be useful for non-Russian speaking users. But you can answer in Russian if it’s more convenient for you.

#2

I found a solution - add an empty row: {}

Like here: https://webix.com/snippet/8b3f8b62

Is it the best solution? Or maybe you can suggest a better one?

#3

It is a proper solution.

height andwidth properties expect only number values. Any string won’t be processed properly (it’s the most frequent mistake despite the description in API, so we will emphasize it in docs once more).

Up to 4.3.0, such issue was non-obvious for users. The view with the invalid size was adjusted to the parent container, as a side effect of the old sizing logic (and it was a bug).

In the 4.3 version, sizing was improved and this issue became visible. So you were completely right adding an empty view to fill the rest of the space.

Still, the main point here - please avoid setting string values for these properties. Debug version of the library contains the related warning.

#4

Thank you for the answer.

But I still can assign string value ‘auto’ to height and width. Is it correct?

#5

Nope. "auto" is a string as well and doesn’t make any sense for the constructor and can cause sizing issues in the complex apps.

Without a strict size, layout/form will be adjusted to the inner content. A spacer{ } inside its structure allows spreading this layout and adjust it to the parent container.

"auto" can be set in only one specific case, i.e. for the data templates:

{
   view:"list",
   data:dataset,
   template:"<!-- a complex template -->",
   height:400,
   type:{
      height:"auto"   // height for data items, not for the component
   }
}

https://webix.com/snippet/f4b4f0ee