Multi-line label for radio type problem

Suite and Optimus Suite 5
#1

Hi there,

I need to build a form that would use radio type inputs. Each radio will need to have a long description (probably as a label).

I have noticed the label however is being cut short (not wrapping). Tried to use a combination of labelWidth and labelHeight, but even if the width of the label does the trick, labelHeight seems to only increase the height of the label, but thext is still not being wrapped and the rest of the box (labelWidth x labelHeight) is left blank.

Here’s the code:

[code]

Form 1 
<!-- dhtmlx.css contains styles definitions for all included components -->
<link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css">
<link rel="stylesheet" type="text/css" href="form.css">

<script src="codebase/connector/connector.js"></script>
<script type="text/javascript" src="main.js"></script>
<style>
    /*these styles allow dhtmlxLayout to work in fullscreen mode in different browsers correctly*/
    html, body {
       width: 100%;
       height: 100%;
       margin: 0px;
       overflow: hidden;
       background-color:white;
    }
</style>

<div id="myForm" style="height:500px;">
    <ul class="dhtmlxForm" name="myForm" oninit="doOnFormInit">
    	<li ftype="settings" position="label-left" labelWidth="120" inputWidth="auto"></li>
		<li ftype="fieldset" name="data" inputWidth="auto" width="auto">
        	Value
        	<ul>
                <li ftype="label" labelWidth="auto" position="label-top">Customer Focus</li>
                <li ftype="radio" name="ratio1" labelHeight="100" labelWidth="800" position="label-right" label="Considers customers to be a priority, and works closely with them to identify and anticipate their needs. Maintains frequent communication with the customer to set realistic expectations. Consistently ensures that their needs and expectations are met."></li>
                <li ftype="radio" name="ratio1" labelWidth="800" position="label-right" label="Any other label"</li>
            </ul>
		</li>
    </ul>
</div>
[/code]

Here’s how it looks in the browser:

889×198 2.9 KB

Is there a way to be able to display the entire label text for radio type or any suggestion for workaround so I can have the radio option description of any length?

I use Windows XP SP3, Firefox 3.6.27 and DHTMLX 3.0 Standard

#2

Hello

Please try attached demo.
demo.rar (25.2 KB)

#3

Andrei,

Thank you for the effort and the demo.

I have 2 observations regarding sample files provided:

  1. The demo works like a charm when used codebase folder from the attachment
  2. The demo will not fix disappearing radio label text if codebase lib I downloaded from your website is used

Is there a modified version of dhtmlx form included in the demo? If it is, is there updated version of entire library available? I use more components in the same project and would rather like to avoid using mixed versions of lib within the same application…

Many thanks!

Adam

#4

Hello,

For recompiled dhtmlx.js - please open ticket in out support system.

#5

Hello,
can the same thing be achieved when form is created via XML?

How to create multi-line label for single-line input element? Input label is created dynamically from database. So it is hard to guess server-side what labelHeight should be used and where to insert
tag.

#6

Hi

Native form styles have css rule - white-space:nowrap;

Add className attribute to item where you need to use long-long text,
and declare some css

xml conf:
<item type=“radio” name=“type” labelWidth=“auto” position=“label-right” label=“Not registered yet” className=“myClass”/>

css:
.myClass, .myClass div, .myClass span {
white-space: normal !important;
}