Unitlist auto height doesn't work for header

Webix JS
#1

Setting height: ‘auto’ doesn’t work for header:

https://snippet.webix.com/nyo8cftv

Also, documentation of property “type” of ui.unitlist is wrong:

https://docs.webix.com/api__link__ui.unitlist_type_config.html

templateItem, templateGroup & templateBack don’t work for unitlist

#2

Hey @maug, your first point seems like more of an issue with css, by default h1 has margins both on top and bottom of itself, you just simply have to remove them: https://snippet.webix.com/lou5k18x. I would also like to point out that it is better to use template strings instead of + syntax, you can can see the implementation in my example.
As for your second point it seems that you are right, I will double check it and notify you once i get the confirmation.

#3

Thanks @Dzmitry!

Is that possible for unitlist header to have more than one line (with height: auto) like regular list items? It doesn’t seem to work here:

https://snippet.webix.com/pw1r0lne

#4

The height: auto property will only affect the list items, not the header itself, to adjust the header you have to use a combination of html/css to achieve the end result you want: https://snippet.webix.com/xrt636e6 - you have to override the inline style for the unitlist header with !important, after that I’ve used flexbox to align our text vertically. Please also note that I’ve specified a css class inside the type property, with this, you can reference the header by .webix_unit_[your_class]_header.

#5

Thank you for your solution @Dzmitry!

#6

Actually, it seems that there is also another way to do this. unitlist.type has a property named headerHeight that can help you with setting the height of your header: https://snippet.webix.com/mapji4v5. However, in this case you would still need to vertically align the header.
We will document the headerHeight property as well as we will also delete the irrelevant properties like templateItem, templateGroup & templateBack from the unitlist.type documentation.