0

How to wrap ZK Radio Buttons in different screen size

asked 2018-02-07 20:38:05 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2623 3 8
http://emrpms.blogspot.in...

image description

delete flag offensive retag edit

3 Answers

Sort by ยป oldest newest most voted
0

answered 2018-02-09 12:18:29 +0800

cor3000 gravatar image cor3000
6280 2 7

updated 2018-02-09 12:19:52 +0800

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

link publish delete flag offensive edit
0

answered 2018-02-09 13:04:16 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2623 3 8
http://emrpms.blogspot.in...

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>
link publish delete flag offensive edit
0

answered 2018-02-12 10:02:04 +0800

cor3000 gravatar image cor3000
6280 2 7

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

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2018-02-07 20:38:05 +0800

Seen: 18 times

Last updated: Feb 12 '18

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More