Multi-line lable for radio button

Webix JS
#1

How I can make multi-line lable for radio button?

#2

It is possible, but you need to set a custom height in the control configuration and in its CSS:

http://webix.com/snippet/97c4e669

#3

I mean multi-line values in options.

http://webix.com/snippet/ae199e16

#4

Again, it’s a question of CSS. Here you go: http://webix.com/snippet/dc20b0b1

#5

About multi-line label for checkboxes: problem is similiar, but I can’t fix it with CSS (I’m not so good in CSS) and I guess the problem is in direct setting height in the style for div-tag :

http://webix.com/snippet/0426efcf

#6

Hello @kox,

The point is that ui.checkbox requires the predefined height, as well as the ui.radio. But as checkboxes are separate components, each of them should have its own size: http://webix.com/snippet/28aa8462

Also please note that inputs don’t have the autoheight property.

#7

Hello @listopad,

I cut the html from your framework, one thing I did: removed “height: 38px”
from first two divs of each checkbox component:
div class="webix_view webix_control webix_el_checkbox" .... div class="webix_el_box" ...
That’s exactly what I mean about direct setting height in style of div:
http://webix.com/snippet/1b49110c

P.S. Setting autoheight was my effort to change height due to absence of bright thoughts :slight_smile: never mind.

#8

@kox well, it was made intentionally unify all inputs with the same default size.

Thus, while multiline label can be defined through the css, the final height of the component has to be set via height property.

#9

OK, hence I should create another component based on checkbox to get multi-lines labels in multi-check div(label is taken from database and can be 1-5 rows) or overload function “template” or what?

#10

>hence I should create another component

While setting a label, you can check its text size and calculate the needed height. But yes, only a custom component can fit all mentioned requirements.

#11

thanks, I will try