-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi Senthil,
by default a <radio> elements inside a <radiogroup> automatically wrap as you can see in this zkfiddle example.
I assume you are doing something custom or non default that prevents line wrapping, such as placing the <radio> elements inside an <hlayout> or via CSS.
Please provide some information on what you are doing in code we anyone has the chance to help. Unfortunately the screenshot doesn't give away this information.
Robert
Sorry. Here is the code which gives problem for us
<panel>
<panelchildren>
<groupbox mold="3d" closable="false"
sclass="grpboxSectionBar">
<vgrid>
<columns>
<column hflex="6"></column>
<column hflex="1"></column>
</columns>
<rows>
<row>
<vlayout>
<label
value="Problem Description" />
<textbox focus="true"
readonly="@load(vm.makeAsReadOnly)"
value="@bind(fx.problems)" hflex="1" maxlength="500" />
</vlayout>
<vlayout>
<label value="Problem Code" />
<hbox hflex="1">
<combobox
readonly="@load(vm.makeAsReadOnly)"
model="@load(vm.icdCodesM1)" hflex="1"
onSelect="@command('onSelectICDCode')"
value="@bind(fx.ICDCode)" mold="rounded"
selectedItem="@bind(fx.ICDCode)" autodrop="true"
autocomplete="true">
<template
name="model">
<comboitem
label="@load(each)" value="@load(each)" />
</template>
</combobox>
<a visible="@load( not vm.makeAsReadOnly)"
tooltiptext="Problem Code Lookup"
class="fa fa-search-plus fa-lg"
onClick="@command('OnICDLookUp',lookupType='code1')">
</a>
</hbox>
</vlayout>
</row>
<row>
<cell colspan="2">
<vlayout>
<label value="Status" />
<div sclass="divrounded">
<radiogroup hflex="1"
selectedItem="@bind(fx.status)">
<radio
disabled="@load(vm.makeAsReadOnly)" label="Better"
value="Better" />
<radio
disabled="@load(vm.makeAsReadOnly)" label="Controlled"
value="Controlled" />
<radio
disabled="@load(vm.makeAsReadOnly)" label="Un Controlled"
value="Un Controlled" />
<radio
disabled="@load(vm.makeAsReadOnly)" label="Chronic"
value="Chronic" />
<radio label="Acute"
disabled="@load(vm.makeAsReadOnly)" value="Acute" />
<radio
disabled="@load(vm.makeAsReadOnly)" label="No Complaints"
value="No Complaints" />
<radio
disabled="@load(vm.makeAsReadOnly)" label="No Change"
value="No Change" />
<radio
disabled="@load(vm.makeAsReadOnly)"
label="Out of Medicine" value="Out of Medicine" />
<radio
disabled="@load(vm.makeAsReadOnly)" label="Stable"
value="Stable" />
<radio label="Worse"
disabled="@load(vm.makeAsReadOnly)" value="Worse" />
<radio
disabled="@load(vm.makeAsReadOnly)" label="Resolved"
value="Resolved" />
</radiogroup>
</div>
</vlayout>
</cell>
</row>
</rows>
</vgrid>
Hi Senthil,
I added your example into this zkfiddle.
Still the radio group wraps as expected. Of course I don't have access to your custom component <vgrid>
or the custom styles e.g. <div sclass="divrounded">
. This style class could easily prevent line wrapping of it's content. Also your vgrid component could limit the row height via css style.
I can't help you much more ... with the given information. To me it seems like you have all the information right in front of you. All it needs is a right-click -> inspect element -> and then find the element/style causing the non-wrapping or truncated content.
Once you identified the style that I am sure it's obvious what needs to be changed to give the desired results - however feel free to provide a reproducing example here (please make sure it actually shows your problem) so anyone can help you.
Robert
Asked: 2018-02-07 20:38:05 +0800
Seen: 18 times
Last updated: Feb 12 '18