Unexplainable VerticalLayout behaviour inside a CustomLayout

Hi Guys,

I’ve bumped into a wierd problem which is beyond my CSS and HTML knowledge.

Basically I wanted to use a floating side-panel in my Vaadin app as follows: the panel will be toggled by the user and will hover above the application when it’s visible. The content will be a VerticalLayout which is populated according to the context.

I’ve managed to implement this using a CustomLayout containing a div to which I inserted a VerticalLayout. I’ve also included a jQuery import and the script to do the toggling. I’m using Vaadin 6.8.12 by the way (can’t upgrade at this stage).

The relevant html for the customlayout (layout is added to the “hoverPanel” location)

[code]

Settings

[/code] The css:

[code]
.hover-panel {
position: fixed;
top: 160px;
right: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
width: 220px;
height: auto;
padding: 20px 20px 20px 20px;
color: #cccccc;
z-index: 500;
}

.hover-toggle {
position: fixed;
top: 180px;
right: 0;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 20px 20px 10px;
font-weight: 700;
background-color: #333333;
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
z-index: 500;
}

[/code]The first problem appeared when I changed the layout contents while the VerticalLayout was visible. This somehow caused the contained widget sizes to be calculated incorrectly and eventually garbled all components inside. Workaround is to explicitly hide the panel when the layout is changed.

A further problem appeared when I inserted an Accordion which basically disabled the rendering of the whole layout. Workaround is to recursively call requestRepaint on every TabSheet and descendant components when the panel is already showing.

Although the thing is working, two questions still bugging me:

  • why can’t I change the layout when it is visible?
  • what is special about a TabSheet component?

Any advice is much appreciated on what am I doing wrong. Thanks in advance!

Cheers,
David