0

How to put a scrollbar inside a tabpanel

asked 2009-10-13 04:11:23 +0800

judacoor gravatar image judacoor
280 1 3 8

Hello everyone,

I have bit of a problem and I hope you guys can help me...

I have a zul with a borderlayout east, and center

on the center there's an include


That include has the following:

<window width="100%" height="99%">
	<caption width="99%">
		<hbox width="99%">
			<div align="left">
			<toolbarbutton id="save" />
			<separator orient="vertical"/>
			<toolbarbutton id="cancel"/>
			</div>		
			<div align="right">
				<label id="Name"/>
			</div>		
		</hbox>
	</caption>
	<div align="left" width="100%" height="99%">		
		<include id="interInclude" height="99%"/>
	</div>
</window>

And the src of id="interInclude" is this:

<window width="100%">	
	<tabbox width="100%">
		<tabs id="tabs">
			<tab />			
			<tab />
			<tab />			
		</tabs>
		<tabpanels id="tabPanels">
			<tabpanel>
				<include />
			</tabpanel>
			<tabpanel>
				<include />
			</tabpanel>
			<tabpanel>
				<include />
			</tabpanel>
			
		</tabpanels>		
	</tabbox>
</window>

The problem is that the scrollbar are appearing outside of the tabbox and it is very unconfortable because when you scroll down you stop seeing the tabs, so you gotta scroll up again to change tabs.

I was wondering how could I prevent the scrollbars from appearing outside of the tabbox, and making them appear inside of the tabpanel instead.

Could you please help me?

Thank you

judacoor

delete flag offensive retag edit

11 Replies

Sort by ยป oldest newest

answered 2009-10-13 22:48:44 +0800

madruga0315 gravatar image madruga0315 flag of Brazil
937 2 12

I would like to know how achieve this too

link publish delete flag offensive edit

answered 2009-10-16 01:08:10 +0800

judacoor gravatar image judacoor
280 1 3 8

Hey everyone,

Any ideas?

Please?

I've tried everything I can think of and.....nothing

link publish delete flag offensive edit

answered 2009-10-16 01:55:36 +0800

woodyki gravatar image woodyki
168

Some components (e.g. Listbox, Grid, Textbox, etc) have built-in scrollbar.

You can try to use a Grid (single cell) to enclose others component inside the panel.
The scroll bar will be showed inside the panel if the component size was greater than the Grid.

link publish delete flag offensive edit

answered 2009-10-22 09:01:47 +0800

luislealp gravatar image luislealp
3

hi, this works for me:

<tabbox height="100%">
<tabs>
<tab label="0"/>
</tabs>
<tabpanels>
<tabpanel style="overflow:auto" >
....
</tabpanel>
</tabpanels>
</tabbox>

link publish delete flag offensive edit

answered 2009-10-22 21:51:44 +0800

tomyeh gravatar image tomyeh
610 1 3
http://blog.zkoss.org ZK Team

It can be done easily with vflex. Please refer to this.

link publish delete flag offensive edit

answered 2009-11-18 16:32:20 +0800

DrFrank gravatar image DrFrank
39 1

thank you luislealp...... it works for me tooooooo!!!!!!!!!!!!

link publish delete flag offensive edit

answered 2010-04-01 04:02:04 +0800

heruprayugo gravatar image heruprayugo
21
heruprayugo.wordpress.com

thankyou luislealp, thats solution solve my problem.

link publish delete flag offensive edit

answered 2012-09-17 18:59:54 +0800

manishchadha gravatar image manishchadha
3

I see the scroll bars in Firefox but not in IE 8.0.6001.18702CO. When I run my the browser on the Server machine (running windows server) with IE version 8.0.7601.17514, the scroll bars look ok. Anyone else having with IE versions, or running the browser on the desktop vs server?

link publish delete flag offensive edit

answered 2012-09-22 17:35:25 +0800

judacoor gravatar image judacoor
280 1 3 8

Hi manishchadha,

I have seen problems of object rendering in IE. Firefox and Safari normally work fine. However, IE tends to show objects with slight differences, mainly when it comes to width recalculation. That being said, the scrollbars always appear.

This is not the proper forum topic to post such question. This topic is about scrollbar inside a tabpanel. Yours is a different issue.

I encourage you to look for a more appropriate post, or to post a new topic of your own, to address your issue.

Have a great day.

link publish delete flag offensive edit

answered 2012-11-28 09:55:03 +0800

nasson gravatar image nasson
3

Use this: <window contentStyle="overflow:auto"> </window>

link publish delete flag offensive edit
Your reply
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

RSS

Stats

Asked: 2009-10-13 04:11:23 +0800

Seen: 5,489 times

Last updated: Dec 05 '12

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