Calendar: Every click/selection scrolls to top of the page

answered 2011-07-22 19:32:16 +0800

andiklein
39 ● 2 ● 2

Hi benbai.

Thank you, I've just tried your suggestions (and I was sure I had already tried that earlier), sadly however it doesn't solve the problem.
With a vflex of 1 the page still jumps to the top every time I click the calendar, if I set a fixed height for the window all overflowing content incl. the calendar itself is of course hidden and unusable.
Same goes for a combination of the two or setting a fixed window height that is greater than the required space, e.g. win.setHeight("2000px").
All that achieves is unnessecary whitespace and a longer scrollbar, but the click-the-calendar->jump-to-top issue remains.

Unfortunately the calendar component does not accept manually giving it the focus either, so a dirty workaround using events and cal.focus() doesn't work.
If there is a focussable component, say a textbox, further down the page, you can use an onChange Event on the calendar and have the listener focus on that component instead whenever cal changes (Sadly this event is not triggered by all possible actions in the calendar either).

Window win = new Window();

Vbox vbox = new Vbox();

Separator separator = new Separator("horizontal");
separator.setHeight("1000px");
separator.setParent(vbox);

final Calendar cal = new Calendar();
final Textbox someTb = new Textbox();

EventListener focusLst = new EventListener() {
	@Override
	public void onEvent(Event event) throws Exception {
		someTb.focus();
	}
};
cal.addEventListener(Events.ON_CHANGE, focusLst);

cal.setParent(vbox);
someTb.setParent(vbox);

vbox.setParent(win);
win.setPage(page);

But in any case this would of course be a very ugly hack at best.

answered 2011-07-24 03:22:12 +0800

andiklein
39 ● 2 ● 2

updated 2011-07-24 03:24:07 +0800

Thanks again benbai.

The example you sent works fine in Fiddle but still fails when I put everything inside a simple Richlet.
I'm not using ZUL but prefer coding directly in Java based on ZK Richlets.
Here's my code, you'd expect it works exactly like your script:

import org.zkoss.zk.ui.GenericRichlet;
import org.zkoss.zk.ui.Page;
import org.zkoss.zul.Calendar;
import org.zkoss.zul.Separator;
import org.zkoss.zul.Vbox;
import org.zkoss.zul.Window;

public class TestRichlet extends GenericRichlet {

	public TestRichlet() {
		
	}

	@Override
	public void service(Page page) {
		page.setTitle("TEST RICHLET");

		Window win = new Window();
		win.setVflex("1");
		win.setContentStyle("overflow: auto");
		Vbox vbox = new Vbox();

		Separator separator = new Separator("horizontal");
		separator.setHeight("1000px");
		separator.setParent(vbox);

		Calendar cal = new Calendar();
		cal.setParent(vbox);

		vbox.setParent(win);
		win.setPage(page);
	}

}

answered 2011-07-24 08:24:02 +0800

andiklein
39 ● 2 ● 2

Wow, thanks for that benbai.

answered 2011-07-30 21:21:38 +0800

andiklein
39 ● 2 ● 2

Eureka!

I switched to the Breeze theme and lo and behold - the problem is history.