0

How to set initial position of floating Panels?

asked 2014-11-04 07:24:27 +0800

peterg4000 gravatar image peterg4000
30 2

I am trying to create a 'multiple window' desktop view with 3 or 4 windows a user can adjust to their liking.

I initially used zk 'window' containers, and it worked great, but the ID Space separation between them was a problem.

So I changed to floatable, movable Panels.

THE PROBLEM - So far my .zul attempts have all the panels coming up on top of each other at page load. The 'top=' attribute doesn't seem to work.

I have made a zk fiddle at: http://zkfiddle.org/sample/1hmq0dh/3-Floating-panel-positioning

And .zul code is below.

Can someone please show me the best/simplest/normal way to give these panels a sensible starting position?

<window title="Outer window" width="100%" height="100%">

  <!-- How to get these 2 panels to not appear on top of each other??? -->

  <panel title="Panel 1 at top=5%" top="10px" width="50%" floatable="true" movable="true" >
    <panelchildren>
      <button label="Button 1"/>
    </panelchildren>
  </panel>

  <panel title="Panel 2 at top=30%" top="300px" width="50%" floatable="true" movable="true" >
    <panelchildren>
      <button label="Button 2"/>
    </panelchildren>
  </panel>

</window>
delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted
1

answered 2014-11-05 00:58:12 +0800

JerryChen gravatar image JerryChen
1596 3
ZK Team

I will use CSS style.

<window title="Outer window" width="100%" height="100%">

  <!-- How to get these 2 panels to not appear on top of each other??? -->

  <panel title="Panel 1 at top=5%" top="10px" width="50%" floatable="true" movable="true" style="top:10px; position:absolute;" >
    <panelchildren>
      <button label="Button 1"/>
    </panelchildren>
  </panel>

  <panel title="Panel 2 at top=30%" top="300px" width="50%" floatable="true" movable="true" style="top:30%; position:absolute;" >
    <panelchildren>
      <button label="Button 2"/>
    </panelchildren>
  </panel>

</window>
link publish delete flag offensive edit
0

answered 2014-11-05 07:12:06 +0800

peterg4000 gravatar image peterg4000
30 2

Great! Thanks for that. Love the support.

I actually found that just setting style="position:absolute;" in the Panels was enough. After this, the existing 'top="30%"' attribute in the zk started to work.

(P.S. Sorry - I had mixed up '%' and 'px' in my original example) I also found that a <zk> root tag is enough to wrap this example.

I have updated the Fiddle to show this working now: http://zkfiddle.org/sample/1hmq0dh/7-Floating-panel-positioning

But why do I have to resort to CSS styles in cases like this?

Is this a bug?

link publish delete flag offensive edit

Comments

No, it's not a bug. Because there aren't every components whose position are relative or absolute.

JerryChen ( 2014-11-05 08:07:37 +0800 )edit

OK, thanks. I'll take your word for it. Still seems weird to me that zk doesn't just do that CSS styling for me based on my attributes in the panel tag. Lesson learnt though - Don't be afraid to resort to CSS-based positioning.

peterg4000 ( 2014-11-09 11:21:59 +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
1 follower

RSS

Stats

Asked: 2014-11-04 07:24:27 +0800

Seen: 23 times

Last updated: Nov 05 '14

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