Glasspanel (Transparent panel about another panel)

Vaadin 6 / 7 / 8
1

Hi, I am searching for a Glasspanel.

For example, I have a splitpanel and the leftside I will make it 0.6 opacity transparent, so the components under them shines through but could not pressed). The right side I can work normal. How I do this?

I read this post. https://vaadin.com/forum#!/thread/73203

Have someone an example, how I can do this?

2

I have solved itself

3

How did you solve it?

4

Here my test code for a splitpanel

    HorizontalSplitPanel splitLayoutPanel = new HorizontalSplitPanel();
    VerticalLayout topLayout = new VerticalLayout();
    VerticalLayout contentLayout = new VerticalLayout();
    VerticalLayout mainLayout = new VerticalLayout();
    mainLayout.setWidth("100%");
    mainLayout.setHeight("100%");
    mainLayout.addComponent(topLayout);
    mainLayout.addComponent(contentLayout);
    topLayout.addComponent(new Label("mytest"));
    contentLayout.addComponent(new Button("Test"));
    contentLayout.setWidth("100%");
    contentLayout.setHeight("100%");
    mainLayout.setExpandRatio(contentLayout, 1.0f);

    AbsoluteLayout absoluteLayout = new AbsoluteLayout();
    absoluteLayout.addComponent(mainLayout, "left: 0px; top: 0px;");
    VerticalLayout glassPanelLayout = new VerticalLayout();
    glassPanelLayout.setWidth("100%");
    glassPanelLayout.setHeight("100%");
    glassPanelLayout.addStyleName("glasspanel-position");
    absoluteLayout.addComponent(glassPanelLayout, "left: 0px; top: 0px;");
    splitLayoutPanel.setFirstComponent(absoluteLayout);
    splitLayoutPanel.setSizeFull();
    VerticalLayout vRight = new VerticalLayout();
    vRight.setWidth("100%");
    vRight.setHeight("100%");
    splitLayoutPanel.setSplitPosition(300, Unit.PIXELS);
    Label titleContent = new Label("Hallo2");
    vRight.addComponent(titleContent);
    vRight.setComponentAlignment(titleContent, Alignment.TOP_CENTER);
    splitLayoutPanel.setSecondComponent(vRight);
    setContent(splitLayoutPanel);

Here the css

.glasspanel-position
{
height: 100%;
width:100%;
z-index: 100;
background-color: rgba(0,0,0,0.7);
}