Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hey everyone,
could anybody please help me? I'm trying to divide the window into several panels using borderlayout, on top I have a banner, center is were the stuff is gonna be, and in the south there is fisheyebar.
But I can't seem to put the fisheyebar on the exact middle of the south panel, here's what I've got so far:
<south flex="true" size="15%" maxsize="150">
<borderlayout>
<west width="20%">
<div align="center" width="100%" height="100%">
<image vspace="7" height="80%" width="70%" src="/img/left.png"/>
</div>
</west>
<center>
<div align="center" height="100%" width="100%">
<fisheyebar style="align:middle" id="fish2" labelEdge="top" itemMaxHeight="100" itemMaxWidth="100" >
<fisheye image="/img/icon_browser.png" label="Web Browser"
onClick="alert(self.label)" tooltiptext="Web Browser"/>
<fisheye image="/img/icon_calendar.png" label="Calendar"
onClick="alert(self.label)" />
<fisheye image="/img/icon_email.png" label="Email"
onClick="alert(self.label)" />
<fisheye image="/img/icon_texteditor.png" label="Text Editor"
onClick="alert(self.label)" />
<fisheye image="/img/icon_update.png" label="Software Update"
onClick="alert(self.label)" />
<fisheye image="/img/icon_users.png" label="Users"
onClick="alert(self.label)" />
</fisheyebar>
</div>
</center>
<east width="20%">
<div align="center" width="100%" height="100%">
<image vspace="7" height="80%" width="70%" src="/img/right.png"/>
</div>
</east>
</borderlayout>
</south>
And the fisheyebar is centered all right, but the vertical alignement is not in the middle! It's always near the top....
And another thing...please!!
Because the fisheyebar is on the south, when I do hover the icons grow larger but they come out of the south region of the borderlayout, so they try to ocuppy a little bit of the center region, but they are always behing the center panel.........what I need to do is to kinda like when using powerpoint and you tell something "Bring to Front" and then thing is always on top of other items...
Please help me!
thanks in advance!
Hi judacoor,
You can try adding <div> as 'padding', as follows:
<window title="Fisheye Bar" height="300px" border="normal"> <borderlayout> <west width="20%"> <div align="center" width="100%" height="100%"> <image vspace="7" height="80%" width="70%" src="/img/left.png" /> </div> </west> <center> <div align="center" height="100%" width="100%"> <div height="100px"/> <fisheyebar style="align:middle" id="fish2" labelEdge="top" itemMaxHeight="100" itemMaxWidth="100"> <fisheye image="/img/icon_browser.png" label="Web Browser" onClick="alert(self.label)" tooltiptext="Web Browser" /> <fisheye image="/img/icon_calendar.png" label="Calendar" onClick="alert(self.label)" /> <fisheye image="/img/icon_email.png" label="Email" onClick="alert(self.label)" /> <fisheye image="/img/icon_texteditor.png" label="Text Editor" onClick="alert(self.label)" /> <fisheye image="/img/icon_update.png" label="Software Update" onClick="alert(self.label)" /> <fisheye image="/img/icon_users.png" label="Users" onClick="alert(self.label)" /> </fisheyebar> </div> </center> <east width="20%"> <div align="center" width="100%" height="100%"> <image vspace="7" height="80%" width="70%" src="/img/right.png" /> </div> </east> </borderlayout> </window>
You can put a fisheyebar in an overlapped window... any other ideas?
hi,
i've seen this post, and i've and additional ask to this problem:
if i implment the fisheye with java and not with zul scripting, how can i manage to center it?
thanks
Try this code:
<zk> <window id="win" border="normal" width="350px" sizable="true" height="400px" style="overflow:visible"> <caption image="/img/inet.png" label="Hi there!"/> <checkbox label="Hello, World!"/> <separator bar="true"/> Auto-position (applicable if not embedded) <separator/> <button label="left,center" onClick="win.position = "left,center";"/> <button label="right,bottom" onClick="win.position = "right,bottom";"/> <button label="center" onClick="win.position = "center";"/> <fisheyebar style="position:absolute;margin:20px;" attachEdge="top"> <fisheye image="/img/icon_browser.png" label="Web Browser" onClick="alert(self.label)" /> <fisheye image="/img/icon_calendar.png" label="Calendar" onClick="alert(self.label)" /> <fisheye image="/img/icon_email.png" label="Email" onClick="alert(self.label)" /> <fisheye image="/img/icon_texteditor.png" label="Text Editor" onClick="alert(self.label)" /> <fisheye image="/img/icon_update.png" label="Software Update" onClick="alert(self.label)" /> <fisheye image="/img/icon_users.png" label="Users" onClick="alert(self.label)" /> </fisheyebar> </window> <button label="Overlap" onClick="win.doOverlapped();"/> <button label="Popup" onClick="win.doPopup();"/> <button label="Embed" onClick="win.doEmbedded();"/> </zk>
Regards,
robertLee thanks for your post!
I tryed it using the style: overflow visible and it's working fine, but the window needs to be in overlapped mode.
But the problem now is that I can't hide the borders of the window, I already did the border="none" but the thing still shows up with a blue border... :(
The other problem is that it doesn't re-position itself if I resize the browser window, it just stays there (I'm guessing because it's overlapped); so if I want to resize the browser I'd have to refresh the hole page!
Here's what I have so far:
<zk xmlns="http://www.zkoss.org/2005/zul"
xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
<window id="main" border="normal" width="100%" height="100%">
<borderlayout height="100%">
<north id="mainNorth" maxsize="150" flex="true" size="85px">
</north>
<center id="mainCenter" flex="true">
</center>
<south id="mainSouth" flex="true" size="75px">
<borderlayout>
<west width="20%">
<div align="center" width="100%" height="100%">
</div>
</west>
<center id="cen">
<window mode="overlapped" border="none" width="58%" height="75px" position="center,bottom" style="overflow:visible">
<div align="center" height="100%" width="100%">
<fisheyebar id="fishBar" sclass="fishBar" width="100%" height="100%"
labelEdge="top" itemMaxHeight="200" itemMaxWidth="180" attachEdge="bottom">
<fisheye image="/img/icon_update.png" tooltiptext="Ret"/>
<fisheye image="/img/sug.png" tooltiptext="Sug"/>
<fisheye image="/img/sam.png" tooltiptext="Mu"/>
<fisheye image="/img/pa.jpg" tooltiptext="Pac"/>
<fisheye image="/img/lo.png" tooltiptext="Cer"/>
</fisheyebar>
</div>
</window>
</center>
<east width="20%">
<div align="center" width="100%" height="100%">
</div>
</east>
</borderlayout>
</south>
</borderlayout>
</window>
</zk>
But it doesn't look nice yet! The overlapped window border gives the impression that it doesn't belong to the page itself, so it's not what I want for my users!
Could there be a way to completely remove the window the window border.....?
And (MOST IMPORTANTLY) could there be a way for the window to automatically size itself to the same width and height of the center (id=cen) borderlayout (I did it the wrong way I think), and position itself to the middle of that element?
I would guess is like making the fisheyebar window belong to the center (id=cen) borderlayout part, so it's inside of it, but making the fishbarmenu to overlap the rest of the components when its elements become larger...
..I now it's a big favor to ask, but could you please help me??
Thanks in advance!!
And........please!!! Help me!!!!!
Asked: 2008-11-09 19:31:29 +0800
Seen: 466 times
Last updated: Dec 09 '08
