0

Trouble getting listbox scrollbars to appear (zkfiddle example)

asked 2013-09-24 02:02:34 +0800

rickcr gravatar image rickcr
704 7

Man, sometimes I feel like I'm working with CSS when trying to get ZK to do what I want:) I have real trouble many times getting things to work when I'm not assigning hard-coded widths and heights to UI items. Anyway...

Can I get a second pair of eyes on how I get both vertical and horizontal listbox scrollbars to appear in the following layout. I tried to strip it down based on what I'm trying to achieve in my real code.

http://zkfiddle.org/sample/1a3gfei/2-scrollbarsNotShowingUp

I have exaggerated column widths to show the horizontal scroll bar not appearing. Also if you click "get Autos" you'll notice a vertical scroll bar doesn't appear either (even though 70 items are in the list.)

Here is the pasted UI in case someone wants to look at here instead:

<window width="100%" height="100%" apply="org.zkoss.bind.BindComposer"
    vflex="true"
    viewModel="@id('vm') @init('net.learntechnology.AutomobilesVM')">

  <borderlayout height="100%" width="100%">

    <north height="200px;">
      <panel width="100%" height="100%" border="rounded" sizable="true" title="North">

        <panelchildren>
          <vlayout height="100%" vflex="true">
            <label value="Stuff"/>
            <label value="Stuff Here"/>
            <button label="GetAutos" onClick="@command('populateTheAutos')"/>
          </vlayout>
        </panelchildren>
      </panel>
    </north>

    <center autoscroll="true">
      <vlayout height="1000px;" width="100%">

        <panel width="100%"  title="Autos" vflex="true" hflex="true">
          <panelchildren>
            <borderlayout vflex="true" hflex="true">
              <center>
                <vlayout style="width:100%">

                  <label value="Some Stuff about Autos"/>

                   <!-- ****** THIS IS THE SECTION I WANT SCROLLABLE -->

                  <listbox id="autosList" model="@load(vm.autos)"
                       forward="onSelect=onAutoSelect"
                       width="2010px" height="100%">
                    <listhead>
                      <listheader label="ID" align="left" width="500px"/>
                      <listheader label="Name" align="left" width="500px"/>
                      <listheader label="COL 3" align="left" width="500px"/>
                      <listheader label="COL 4" align="left" width="500px"/>
                    </listhead>
                    <template name="model" var="item">
                      <listitem
                        value="@load(item)">
                        <listcell label="@load(item.id)"/>
                        <listcell label="@load(item.name)"/>
                        <listcell label="@load(item.id)"/>
                        <listcell label="@load(item.name)"/>
                      </listitem>
                    </template>
                  </listbox>

                  <!-- ABOVE Listbox needs scrollbars -->

                </vlayout>
              </center>
              <south height="24px">
                <hlayout>
                  <button label="Button 1" onClick="@command('foo')"/>
                  <button label="Button 2" onClick="@command('foo2')"/>
                </hlayout>
              </south>
            </borderlayout>
          </panelchildren>
        </panel>

        <panel width="100%"  border="rounded" style="margin-top:5px;" title="Panel 2" vflex="true">
          <panelchildren>

            <borderlayout height="100%">
              <center vflex="true">
                 <label value="The Other Panel Content"/>
              </center>
              <south height="24px">
                <hlayout>
                  <label value="South Stuff"/>
                </hlayout>
              </south>
            </borderlayout>
          </panelchildren>
        </panel>

      </vlayout>
    </center>
  </borderlayout>


</window>
delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted
1

answered 2013-10-01 06:02:48 +0800

cor3000 gravatar image cor3000
4332 1 7
ZK Team

I created another fiddle (using css) to limit the body height of a simple table, let's hope this scales to your application

link publish delete flag offensive edit

Comments

Thanks Robert. That really helps! In my case, I was also using a borderlayout with the listbox in the center region which has some issues since looking at the docs it looks like that'll be problematic with the container of the borderlayout not having a fixed height. I can get by w/out though.

rickcr ( 2013-10-01 17:18:46 +0800 )edit

note, here were some ideas as I was trying with a borderlayout inside of a panel and/or a div http://zkfiddle.org/sample/311m3io/5-tables-with-max-body-height-with-panel

rickcr ( 2013-10-01 17:19:58 +0800 )edit
0

answered 2013-09-27 03:51:13 +0800

cor3000 gravatar image cor3000
4332 1 7
ZK Team

Hi Rick,

I updated the example so that the scrollbars appear when required The main problem was, the listbox had a fixed width of 2010px so that it did not require a scrollbar to display 4 columns of 500px, when the listbox has a smaller width (either fixed or via hflex) the scrollbars will appear.

otherwise if you want to keep the 2010 px width, you can surround the listbox with a <div hflex="1" height="300px" style="overflow: auto"> but then the column headers are hidden when scrolling down the list.

Robert

link publish delete flag offensive edit

Comments

I can't get your zkfiddle example to show the horizontal scroll bars in IE9. I wish I didn't have to support IE but I do:( Looks great in Chrome though. I'm trying a few different things to get it to work in IE 9 but not having much luck. thanks so far though.

rickcr ( 2013-09-27 12:33:35 +0800 )edit

It seems somehow related to it not being able to calculate the size "after" the list is repopulated (after you click the button 'show autos')? For example in this example even in IE it works since the listbox is already populated up front http://zkfiddle.org/sample/1afb8g7/2-scrollbarsNotShowingUp

rickcr ( 2013-09-27 13:20:53 +0800 )edit

By the way, what I'd ultimately like is four panels each with a listbox but the listboxes can change in size based on selections made on the page.I'd really love it if they could have a set max height (and then scroll) but the minimum height would collapse down based on the number of rows.

rickcr ( 2013-09-27 13:37:23 +0800 )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

Follow
2 followers

RSS

Stats

Asked: 2013-09-24 02:02:34 +0800

Seen: 66 times

Last updated: Oct 01 '13

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