0

List box checkmark alignment problem?

asked 2011-12-05 16:05:55 +0800

blin gravatar image blin
45 3

updated 2011-12-05 16:19:58 +0800

In list box when multiple and checkmark set to true, if a label in list cell has style "float: left;", the checkmark will move to the right side of label. Is this a bug?

The following code can reproduce the problem, see the first checkbox is not aligned with the rest.

<zk>
<window title="listbox demo" border="normal" width="250px">
<listbox id="box" checkmark="true" multiple="true">
<listhead sizable="true">
<listheader label="name" sort="auto" ></listheader>
<listheader label="gender" sort="auto" ></listheader>
</listhead>
<listitem>
<listcell>
<label value = "Mary" style="float: left;"></label>
</listcell>
<listcell label="FEMALE" ></listcell>
</listitem>
<listitem>
<listcell label="John" ></listcell>
<listcell label="MALE" ></listcell>
</listitem>
<listitem>
<listcell label="Jane" ></listcell>
<listcell label="FEMALE" ></listcell>
</listitem>
<listitem>
<listcell label="Henry" ></listcell>
<listcell label="MALE" ></listcell>
</listitem>
</listbox>
</window>
</zk>


Thanks,
Bing

delete flag offensive retag edit

4 Replies

Sort by ยป oldest newest

answered 2011-12-06 03:27:02 +0800

matthewgo gravatar image matthewgo
375

updated 2011-12-07 00:57:26 +0800

Hi
Please try the following code:

<label value = "Mary"  style="float:left; display:inline-block">

BTW, is there any specific reason why you specify float as left? since the default behavior is left.

link publish delete flag offensive edit

answered 2011-12-06 13:07:12 +0800

blin gravatar image blin
45 3

Hi matthewgo,

Thank you for the code. But I tried with adding "display:inline-block" to the style, it's still not working.

The reason I specify float as left for the label is because in order to reused the code, I shared the same style for labels when attached to different parent components, some need this style to default to left.

Bing

link publish delete flag offensive edit

answered 2011-12-07 01:23:00 +0800

matthewgo gravatar image matthewgo
375

Hi Bing,
Does the following code meet your need?

<listcell>
    <div style="display:inline-block">
        <label value = "Mary"  style="float:left"></label>
    </div>
</listcell>

link publish delete flag offensive edit

answered 2011-12-07 14:46:38 +0800

blin gravatar image blin
45 3

Hi matthewgo,

Thank you for the code and it worked :-) For my code, I found a workaround.

Thanks again,
Bing

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

RSS

Stats

Asked: 2011-12-05 16:05:55 +0800

Seen: 301 times

Last updated: Dec 07 '11

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