Multi-line lable for radio button

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



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

  • koxkox
    edited December 2016

    I mean multi-line values in options.

  • Again, it's a question of CSS. Here you go:

  • 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 :

  • edited December 2016

    Hello @kox,

    The point is that ui.checkbox requires the predefined height, as well as the But as checkboxes are separate components, each of them should have its own size:

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

  • koxkox
    edited December 2016

    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:

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

  • @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.

  • koxkox
    edited December 2016

    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?

  • >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.

  • thanks, I will try

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!