ZK listbox auto width for last row

Question

I want my last listcell has auto width to full the list size. but don't want the listcell too small or swallowed when the list size is not enough.

<listbox width="800px">
    <listhead>
        <listheader width="500px">header 1</listheader>
        <listheader width="500px">header 2</listheader>
        <listheader>header 3</listheader>
    </listhead>

    <listitem>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
    </listitem>

    <listitem>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
    </listitem>

    <listitem>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
    </listitem>
</listbox>

Hope anyone help!

score 1 · Answer 1 · answered Nov 15 '15 at 06:10

1

First of all,

What you want is impossible.
The reason why is pretty obvious, if your screen size is 1000px, where do your browser have to take the space for the 3th column?

The only thing what you can do, when the first 2 columns need to be 500px is setting all available place to the 3th one with vflex="max".

As an optional thing what you could do is make the columns resizable for the user. (set sizable to true in listhead.

answered Nov 15 '15 at 06:10

chillworld

4,207
3
23
50

that right, Currently I'm using resizable. It is not what I want, but it work better. what I want is a scroll bar on the bottom if the size is less than 1100px... it's impossible. thank – Se Song Nov 16 '15 at 00:56
scrollbar is possible, add `contentStyle="overflow:auto;"` to your `window` tag – chillworld Nov 19 '15 at 10:50

score 0 · Answer 2 · answered Nov 13 '15 at 05:38

0

Use hflex="min" in last listheader

As per this documentation,

By default, the widths of columns have to be specified explicitly, or it will be split equally among columns regardless what content they might have. If you want to have the minimal width (that fit the content), you could specify hflex="min" at the column (not the listbox).

<listbox width="800px">
    <listhead>
        <listheader width="500px">header 1</listheader>
        <listheader width="500px">header 2</listheader>
        <listheader hflex="min">header 3</listheader>
    </listhead>

    <listitem>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
    </listitem>

    <listitem>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
    </listitem>

    <listitem>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
    </listitem>
</listbox>

answered Nov 13 '15 at 05:38

Bhushan

1,489
3
27
45

this's work for the last row, but the first two rows are resize. what I want is row one and two is fix size. If the list size is overflow it can be scroll bar on the bottom. – Se Song Nov 13 '15 at 06:20
@SeSong What do you mean by 'the first two rows are resize' ? – Bhushan Nov 13 '15 at 07:38
column 1 and column 2 don't have 500px width, e.g list-width is 1600, the column 3 has only 100px and column and column 2 have 750px. what I want is column 1 and row 2 keep 500px and last column should have 600px. if the list-width smaller than 1100px width it should have a scrollbar on the bottom, and keep column 1 and column2 500px and column 3 at least 100px or using your hflex="max". – Se Song Nov 13 '15 at 08:25
sorry for my last comment I mean column 1 and column 2 – Se Song Nov 13 '15 at 08:29
@SeSong So if you use hflex="max" then I guess it will solve your problem. – Bhushan Nov 13 '15 at 09:35
no, but I use autoresize to enable use resign them self. – Se Song Nov 16 '15 at 03:06

score 0 · Answer 3 · answered Nov 16 '15 at 07:38

this work for me

<listbox vflex="1" width="100%">
    <listhead>
        <listheader width="500px">header 1</listheader>
        <listheader width="500px">header 2</listheader>
        <listheader style="min-width: 120px;display: block;">header 3</listheader>
    </listhead>

    <listitem>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
        <listcell style="min-width: 120px;display: block;">item 1</listcell>
    </listitem>

    <listitem>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
        <listcell style="min-width: 120px;display: block;">item 1</listcell>
    </listitem>

    <listitem>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
        <listcell style="min-width: 120px;display: block;">item 1</listcell>
    </listitem>
</listbox>

ZK listbox auto width for last row

3 Answers3