Listbox issue -> Header width is different to column width (many fields)

asked 2014-02-27 20:23:01 +0800

hp811 gravatar image hp811
1 1


I´ve got 30 fields in my listbox - always with headers. In the first view, the header is directly above the column. But when I set the width to every header field, the headers are not directly above the columns any more. There is a gap. With every field more, the difference between header and column will be bigger. And it depends not on the content of the column. I got the problem with FF and IE. Whats the problem? The column should be always even with the header and the listbox should be scrollable to the right.


        <window id="dataWindow" title="Suchergebnisse">
                    <listbox id="dataListbox"  mold="paging">
                                           <listheader label="abc1" width="100px" />
                                           <listheader label="aasdfbc2"  width="100px"/>
                                           <listheader label="abyxcvyc3"  width="100px"/>
                                           <listheader label="abwerc4" width="100px" />
                                           <listheader label="ayxcvybc5" width="100px"/>
                                           <listheader label="abxycv ewadfc6" width="100px" />
                                           <listheader label="abc7" width="100px" />
                                           <listheader label="abc8" width="100px" />
                                           <listheader label="abyxcvcvc9" width="100px" />
                                           <listheader label="abc10" width="100px"/>
                                           <listheader label="abccc11"  width="100px"/>
                                           <listheader label="abccc12"  width="100px"/>
                                           <listheader label="abbbbbc13"  width="100px"/>
                                           <listheader label="abccc14"  width="100px"/>
                                           <listheader label="abcccc15" width="100px"/>
                                           <listheader label="abc16"  width="100px"/>
                                           <listheader label="abcccccc17"  width="100px"/>
                                           <listheader label="abccccc18"  width="100px"/>
                                           <listheader label="abc19"  width="100px"/>
                                           <listheader label="abcccc20"  width="100px"/>
                                           <listheader label="abc21"  width="100px"/>
                                           <listheader label="abc22"  width="100px"/>
                                           <listheader label="abccc23"  width="100px"/>
                                           <listheader label="abccc24"  width="100px"/>
                                           <listheader label="abcc ccccc25"  width="100px"/>
                                           <listheader label="abcc   ccc26"  width="100px"/>
                                           <listheader label="abc27"  width="100px"/>
                                           <listheader label="accbc28"  width="100px"/>
                                           <listheader label="abcccccc cc29"  width="100px"/>
                                           <listheader label="abc30" width="100px"/>
                               <listitem >
                                           <listcell label="sdfxycvvrd1"/>
                                           <listcell label="sdfxycvfnrd2" />
                                           <listcell label="sdfxycvvpd3" />
                                           <listcell label="sdfxycveinrched4" />
                                           <listcell label="sdfxycvsued5" />
                                           <listcell label="sdfxycvsuengutachtend6" />
                                           <listcell label="sdfxycvvaed7" />
                                           <listcell label="sdfxycvvpvamed8" />
                                           <listcell label="sdfxycveinbdatumd9" />
                                           <listcell label="sdfxycvbeletumd10" />
                                           <listcell label="sdfxycvbelertd11" />
                                           <listcell label="sdfxycvsaarbd12" />
                                           <listcell label="sdfxycvanlrnmed13" />
                                           <listcell label="sdfxycvaervormed14" />
                                           <listcell label="sdfxycehlerplzd15" />
                                           <listcell label="sdfxycvchtungd16" />
                                           <listcell label="sdfxycvatramed17" />
                                           <listcell label="sdfxycvbeaterornaed18" />
                                           <listcell label="sdfxycvktchtend19" />
                                           <listcell label="sdfxycvrecbrstelled20" />
                                           <listcell label="sdfxycvrechbetrd21" />
                                           <listcell label="sdfxycvrechnunrngd22" />
                                           <listcell label="sdfxycvrechnzgrundd23" />
                                           <listcell label="sdfxycvrechnngizzgd24" />
                                           <listcell label="sdfxycntrgrudd25" />
                                           <listcell label="sdfxycgfud26" />
                                           <listcell label="sdfxycvnraostend27" />
                                           <listcell label="sdfxycagteietragd28" />
                                           <listcell label="sdfxycvarusaged29" />
                                           <listcell label="sdfxycvaagehnunggrdd30" />
                    <paging id="paging" detailed="true" autohide="true"></paging>

help, please!

delete flag offensive retag edit

2 Answers

Sort by » oldest newest most voted

answered 2014-02-28 05:41:40 +0800

MVarun gravatar image MVarun flag of India
268 1 6

updated 2014-02-28 05:46:51 +0800


Instead of width properity Try giving hflex="min" for listheader. So that it takes the minimum width required as per the label of that Header.

Also try hflex="1" or 2..." based on the content under that header.

If you think the content will be big, give bigger number like hflex="2" or 3 and hflex="1" for other.

Refer this Document.. to have an idea how hflex and vflex works.


M Varun.

link publish delete flag offensive edit

answered 2014-03-06 12:53:20 +0800

hp811 gravatar image hp811
1 1

updated 2014-03-06 12:57:08 +0800

The Answer is to set the width in % (not fix in px) and the listbox above fix in px.

<window id="dataWindow" title="Suchergebnisse" contentstyle="overflow:auto"> <listbox id="dataListbox" mold="paging" width="2000px"> <listhead> <listheader label="abc1" **width="2%" **=""/> <listheader label="aasdfbc2" width="3%"/> <listheader label="abyxcvyc3" width="5%"/> <listheader label="abwerc4" width="2%"/> <listheader label="ayxcvybc5" width="1%"/> <listheader label="abxycv ewadfc6" width="3%"/> <listheader label="abc7" width="4%"/> <listheader label="abc8" width="3%"/> .....

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

1 follower



Asked: 2014-02-27 20:23:01 +0800

Seen: 40 times

Last updated: Mar 06 '14

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