Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
When we use Hbox,Div inside listcell it’s break new line.
please help me how to fix.
sample code
<zk> <listbox id="box" multiple="true" checkmark="true" rows="0"> <listhead> <listheader label="Name" /> <listheader label="Gender" /> <listheader label="Age" /> </listhead> <listitem> <listcell label="Mary" /> <listcell label="FEMALE" /> <listcell label="18" /> </listitem> <listitem> <listcell label="John"> <combobox height="20px"></combobox> <textbox height="20px"></textbox> </listcell> <listcell label="MALE" /> <listcell label="20" /> </listitem> <listitem> <listcell> <space></space> <hbox align="center"> <textbox rows="5"></textbox> <intbox></intbox> </hbox> </listcell> <listcell label="FEMALE" /> <listcell label="32" /> </listitem> <listitem> <listcell label="Henry" /> <listcell label="MALE" /> <listcell label="29" /> </listitem> <listitem> <listcell label="Mark" /> <listcell label="MALE" /> <listcell label="15" /> </listitem> <listitem> <listcell label="Jeffery" /> <listcell label="MALE" /> <listcell label="17" /> </listitem> <listitem> <listcell label="Rebecca" /> <listcell label="FEMALE" /> <listcell label="21" /> </listitem> </listbox> </zk>
I found My answer.As <hbox> will be converted as html
tag, there will be an extra line break if you wrap the contents with <hbox>. To avoid this you can give the hbox a display:inline-block; for example, <hbox align="center" style="display:inline-block">.Hi hswain,
the problem is the checkbox inside the first column. If you use checkmark = true zk includes the checkbox in the first cell of a row. During the parsing of the zul source into HTML this leads to an additional <span> tag. This is an inline element and creates the linebreak if the space is not sufficent.
HTML source of a listcell with checkbox:
<td id="rKwPk0" class="z-listcell">
<div id="rKwPk0-cave" class="z-listcell-cnt z-overflow-hidden">
<span id="rKwPj0-cm" class="z-listitem-img z-listitem-img-checkbox"></span>
John
<i id="rKwPl0" class="z-combobox" style="height:20px;">
<input id="rKwPm0" class="z-textbox" type="text" value="" style="height:20px;">
</div>
</td>HTML source of a listcell without checkbox:
<td id="rKwPd" class="z-listcell">
<div id="rKwPd-cave" class="z-listcell-cnt z-overflow-hidden">
John
<i id="rKwPe" class="z-combobox" style="height:20px;">
<input id="rKwPf" class="z-textbox" type="text" value="" style="height:20px;">
</div>
</td>What you can do is to insert for the checkbox only an additional column with a fixed width:
<zk> <listbox multiple="true" checkmark="true" id="box" rows="0"> <listhead> <listheader width="30px"></listheader> <listheader label="Name" ></listheader> <listheader label="Gender" ></listheader> <listheader label="Age" ></listheader> </listhead> <listitem> <listcell></listcell> <listcell label="Mary" ></listcell> <listcell label="FEMALE" ></listcell> <listcell label="18" ></listcell> </listitem> <listitem> <listcell></listcell> <listcell label="John"> <combobox height="20px"></combobox> <textbox height="20px"></textbox> </listcell> <listcell label="MALE" ></listcell> <listcell label="20" ></listcell> </listitem> <listitem> <listcell></listcell> <listcell> <space></space> <hbox align="center"> <textbox rows="5"></textbox> <intbox></intbox> </hbox> </listcell> <listcell label="FEMALE" ></listcell> <listcell label="32" ></listcell> </listitem> <listitem> <listcell></listcell> <listcell label="Henry" ></listcell> <listcell label="MALE" ></listcell> <listcell label="29" ></listcell> </listitem> <listitem> <listcell></listcell> <listcell label="Mark" ></listcell> <listcell label="MALE" ></listcell> <listcell label="15" ></listcell> </listitem> <listitem> <listcell></listcell> <listcell label="Jeffery" ></listcell> <listcell label="MALE" ></listcell> <listcell label="17" ></listcell> </listitem> <listitem> <listcell></listcell> <listcell label="Rebecca" ></listcell> <listcell label="FEMALE" ></listcell> <listcell label="21" ></listcell> </listitem> </listbox> </zk>
Thats not the best solution but it works.
regards,
Gunter
Asked: 2013-01-03 05:33:02 +0800
Seen: 153 times
Last updated: Jan 23 '13
Hi Gunter, Thanks for reply. but i useing this listbox with reorder. we cannot add blank header in our case. how to fix it without blank header ( listbox sizedByContent="true" ).
Regards, Himanshu
hswain ( 2013-01-03 09:19:41 +0800 )edit