CODEWITHSUNDEEP
zkzk-grid
Se Song
Se Song

Reputation: 1663

ZK listbox auto width for last row

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!

Upvotes: 1

Views: 2696

Answers (3)

Se Song
Se Song

Reputation: 1663

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>

Upvotes: 0

chillworld
chillworld

Reputation: 4277

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.

Upvotes: 1

Bhushan
Bhushan

Reputation: 1547

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>

Upvotes: 0

Related Questions