List Navigation carousel does not display navigation items properly

Webix JS
1

Hi,
I created carousel with List Navigation. Navigation items display text.
The problem is that Navigation items are cut i.e. dataview is not fitted properly.
snippet: http://webix.com/snippet/396d987f
I need carousel and its navigation occupy entire available space so no hard sizing should be used.
Thank you.

2

The thing is that the dimensions of dataview items are hardcoded by default (160px*50px). That is why they look cut off.

So you can hardcode the new height, the rest of the space will be taken by carousel.

type:{ height:70}

Alternatively, you can set auto height for an item. It this case free space will be evenly distributed between carousel and dataview. Set gravity for a dataview to enable relative sizing for it:

rows:[
   ..carousel..,
   { view:"dataview", 
     gravity:0.1,
     type:{ height:"auto"}
   }
]

http://webix.com/snippet/ac4b7cd2