Fisheyebar can't be on top of other items

asked 2009-01-09 20:52:49 +0800

judacoor
280 ● 1 ● 3 ● 8

Hi everyone!

I'm having a really big problem with the fisheyebar (maybe it's because I'm not an expert) and I was hoping that you guys could help me get it done!

Here's my window:

<window border="normal" width="100%" height="100%" >
	
<caption >
<button/>
</caption>

<borderlayout height="100%">
	<north maxsize="150" size="85px">
		<div align="center" width="100%">
		</div>
	</north>
	<center flex="true" border="none">
		<borderlayout >
			<west width="20%" autoscroll="true" splittable="true" 
				collapsible="true" >				
				<div align="left">
				</div>
			</west>
			<center flex="true" autoscroll="true" >
				<div align="center">
				</div>
			</center>
		</borderlayout>
	</center>
	
	<south flex="true" size="75px" border="normal">			
		<borderlayout>
			<west width="20%" border="none">
				<div align="center" width="100%" height="100%">
				</div>
			</west>
			<center border="normal" style="border-top: 0px; border-bottom: 0px;">
				<div align="center" height="100%" width="100%" >
					<fisheyebar id="fishBar" sclass="fishBar" width="100%" height="100%" 
						itemHeight="60" itemWidth="60" itemMaxHeight="150" itemMaxWidth="150">
						
						<fisheye image="/img/group.bmp" />
						<fisheye image="/img/Note.png" />
						<fisheye image="/img/basket.png" />
						<fisheye image="/img/patho.jpg" >
						<fisheye image="/img/physics.png" >
						<fisheye image="/img/settings.jpg" >
					</fisheyebar>
				</div>
			</center>
			<east width="20%" border="none" >
				<div align="center" width="100%" height="100%">
				</div>
			</east>
		</borderlayout>
	</south>
</borderlayout>
</window>

And here's the style that I've put together for the fisheyebar

.fishBar{
	margin:10px;
	position: center;
	vertical-align: middle;
}

But if you try it, you'll see that when you do mouse over the fisheyes they appear to be behind the center layout, so you can't see the complete icon when it gets bigger... :(

I've struggled too much to get the fisheyebar like "on top" of all the other items so you actually can see its icons get bigger when you move the mouse over them.

I've tryed different types of styles, and I also tryed putting the fisheyebar inside and overlapped window, and altought it works (the icons appear on top), if the window is overlapped, then when it loads it appears like in the middle of the screen and blocks everything else, and that's not the point...I need the fisheyebar to always be there, but on top!

Please help me you guys!

Thanks in advance!

JUDACOOR

delete flag offensive retag edit

5 Replies

Sort by » oldest newest

answered 2009-01-10 02:24:20 +0800

robertlee
561

updated 2009-01-10 02:25:49 +0800

Hi JUDACOOR,

tricky as it seems, following code uses style:overflow:visible throughout the entire path til fisheyebar, and it works.

<window border="normal" width="100%" height="100%" >
	
<caption >
<button/>
</caption>

<borderlayout height="100%" style="overflow:visible">
	<north maxsize="150" size="85px">
		<div align="center" width="100%">
		</div>
	</north>
	<center flex="true" border="none">
		<borderlayout >
			<west width="20%" autoscroll="true" splittable="true" 
				collapsible="true" >				
				<div align="left">
				</div>
			</west>
			<center flex="true" autoscroll="true" >
				<div align="center">
				</div>
			</center>
		</borderlayout>
	</center>
	
	<south flex="true" size="75px" border="normal" style="overflow:visible">			
		<borderlayout style="overflow:visible">
			<west width="20%" border="none">
				<div align="center" width="100%" height="100%">
				</div>
			</west>
			<center border="normal" style="border-top: 0px; border-bottom: 0px;overflow:visible">
				<div align="center" height="100%" width="100%" style="overflow:visible">
					<fisheyebar id="fishBar" sclass="fishBar" width="100%" height="100%"
						itemHeight="60" itemWidth="60" itemMaxHeight="150" itemMaxWidth="150" style="overflow:visible">
						<fisheye image="/img/group.bmp" />
						<fisheye image="/img/Note.png" />
						<fisheye image="/img/basket.png" />
						<fisheye image="/img/patho.jpg" />
						<fisheye image="/img/physics.png" />
						<fisheye image="/img/settings.jpg" />
					</fisheyebar>
				</div>
			</center>
			<east width="20%" border="none" >
				<div align="center" width="100%" height="100%">
				</div>
			</east>
		</borderlayout>
	</south>
</borderlayout>
</window>

ps, plesae make sure your posts stay together if they are on the same topic, this would allow others to find inforamtion easier.

http://www.zkoss.org/forum/index.zul#path%3DlistComment%3BdiscussionId%3D6152%3BcategoryId%3D14%3B

regards,
robert lee

link publish delete flag offensive edit

answered 2009-01-10 16:05:32 +0800

judacoor
280 ● 1 ● 3 ● 8

Robert lee, I cannot thank you enough for your help!

I would like to apologize for starting a new topic on something I had already posted earlier, but the first topic gave the impression that no one was reading it anymore, so I started this new one hoping to get help on my problem.

Anyway, the code works perfectly fine, the style: overflow:visible is getting it done!

Thank you so much robert lee

link publish delete flag offensive edit

answered 2009-02-08 23:32:26 +0800

judacoor
280 ● 1 ● 3 ● 8

RobertLee...
I have another problem now...

Check out this window:

<window id="mainMenu" use="npBO.main.MainMenu" 
	border="normal" width="100%" height="100%" style="overflow:visible;">
	
<caption >
<toolbarbutton label="Terms"  />
<separator orient="vertical" width="10px" />
</caption>

<borderlayout height="100%" style="overflow:visible;">
	<north id="mainNorth" maxsize="150" flex="true" size="85px" style="border-bottom: 0px">
		<div sclass="NorthBanner" align="center" width="100%">
			<image height="95%" src="/img/Top.jpg" />
		</div>
	</north>
	<center id="mainCenter" flex="true" border="none">
		<borderlayout >
			<west  > 
				<div align="left">
					<include sclass="AreaInc" />
				</div>
			</west>
			<center >
				<div align="center" >
					<include sclass="AreaInc" />
				</div>
			</center>
		</borderlayout>
	</center>
	
	<south id="mainSouth" flex="true" size="75px" border="normal" 
			style="border-top: 0px;overflow:visible;">
		<borderlayout style="overflow:visible;">
			<west width="20%" border="none" style="overflow:visible;">
				<div align="center" width="100%" height="100%" style="overflow:visible;">
				<image vspace="7" height="80%" width="70%" src="/img/left.png" style="overflow:visible;"/>
				</div>
			</west>
			<center border="normal" style="border-top: 0px; border-bottom: 0px;overflow:visible;">
				<div align="center" height="100%" width="100%" style="overflow:visible;">
					<fisheyebar id="fishBar" sclass="fishBar" width="100%" height="100%" 
								attachEdge="bottom" labelEdge="top" 
						itemHeight="65" itemWidth="60" itemMaxHeight="130" itemMaxWidth="130">
						
						<fisheye image="/img/retro.gif" />
						<fisheye image="/img/Note.png" />
						<fisheye image="/img/basket.png" />
						<fisheye image="/img/communityIcon.jpg" />
						<fisheye image="/img/fellow.gif" />
						<fisheye image="/img/physics.png"/>
						<fisheye image="/img/txtFile.png" />
						<fisheye image="/img/quality.gif" />
						<fisheye image="/img/settings.gif" />
						<fisheye image="/img/logout.png" />
					</fisheyebar>
				</div>
			</center>
			<east width="20%" border="none" style="overflow:visible;">
				<div align="center" width="100%" height="100%" style="overflow:visible;">
				<image id="eastIm" vspace="7" height="80%" width="70%" src="/img/right.png" style="overflow:visible;"/>
				</div>
			</east>
		</borderlayout>
	</south>
</borderlayout>
</window>

And after the code you helped me with the overlapping started working perfectly but now that I've added more fisheyes, when you do a mouse-over the fisheyebar expands to the right and left, overlapping the east and west areas next to it. But the overlapping style is not working...

It stays behind the images I placed there, any idea why?

I've put the overlapping style everywhere starting from the window itself to the images, but nothing happens, the fisheyebar still remains behind the banners to the left and right of it.

Thanks for your help,
judacoor

link publish delete flag offensive edit

answered 2009-02-11 01:39:24 +0800

PeterKuo
481 ● 2

you may try set css style z-index

a half implemented example is as follow

<window id="mainMenu" 
	border="normal" width="100%" height="100%" style="overflow:visible;">
	
<caption >
<toolbarbutton label="Terms"  />
<separator orient="vertical" width="10px" />
</caption>

<borderlayout height="100%" style="overflow:visible;">
	<north id="mainNorth" maxsize="150" flex="true" size="85px" style="border-bottom: 0px">
		<div sclass="NorthBanner" align="center" width="100%">
			<image height="95%" src="/img/Top.jpg" />
		</div>
	</north>
	<center id="mainCenter" flex="true" border="none">
		<borderlayout >
			<west  > 
				<div align="left">
					<include sclass="AreaInc" />
				</div>
			</west>
			<center >
				<div align="center" >
					<include sclass="AreaInc" />
				</div>
			</center>
		</borderlayout>
	</center>
	
	<south id="mainSouth" flex="true" size="75px" border="normal" 
			style="border-top: 0px;overflow:visible;">
		<borderlayout style="overflow:visible;">
			<west width="20%" border="none" style="overflow:visible;">
				<div align="center" width="100%" height="100%" style="overflow:visible;">
				<image vspace="7" height="80%" width="70%" src="/img/test.jpg" />
				</div>
			</west>
			<center border="normal" style="border-top: 0px; border-bottom: 0px;overflow:visible;">
				<div align="center" height="100%" width="100%" style="overflow:visible;">
					<fisheyebar id="fishBar" sclass="fishBar" width="100%" height="100%" 
								attachEdge="bottom" labelEdge="top" 
						itemHeight="65" itemWidth="60" itemMaxHeight="130" itemMaxWidth="130" style="z-index:2">
						
						<fisheye image="/img/test.jpg" style="z-index:20"/>
						<fisheye image="/img/test.jpg" />
						<fisheye image="/img/test.jpg" />
						<fisheye image="/img/test.jpg" />
						<fisheye image="/img/test.jpg" />
						<fisheye image="/img/test.jpg"/>
						<fisheye image="/img/test.jpg" />
						<fisheye image="/img/test.jpg" />
						<fisheye image="/img/test.jpg" />
						<fisheye image="/img/test.jpg" style="z-index:20"/>
					</fisheyebar>
				</div>
			</center>
			<east width="20%" border="none" style="z-index:1">
				<div align="center" width="100%" height="100%" style="z-index:1">
				<image id="eastIm" vspace="7" height="80%" width="70%" src="/img/test.jpg" style="z-index:1"/>
				</div>
			</east>
		</borderlayout>
	</south>
</borderlayout>
</window>

link publish delete flag offensive edit

answered 2009-02-13 17:14:17 +0800

judacoor
280 ● 1 ● 3 ● 8

Thanks PeterKuo!

Worked like a charm!

BTW, the style only needed to be set in the <east> component, not in the image or div.
Here's a partial code of my window in case anybody needs it:

<east width="20%" style="border: 0px; overflow:visible; z-index: 1;">
				<div align="center" width="100%" height="100%">
				<image id="eastIm" vspace="7" height="80%" width="70%" src="/img/right.png"/>
				</div>
			</east>

Thanks again PeterKuo!

link publish delete flag offensive edit

CORE FRAMEWORK

FEATURED COMPONENTS

TOOLS

EXPLORE ZK

RESOURCES

LEARN ZK

RESOURCES

GET HELP

RESOURCES

MORE ABOUT ZK

MORE ABOUT ZK

Fisheyebar can't be on top of other items

5 Replies

Question tools

Stats

Related questions