在其他面板上显示一个小部件

时间:2015-06-03 22:59:40

标签: css gwt overlay

我正在使用GWT,我在尝试在其他面板上显示一个VerticalPanel时遇到问题。我的应用程序中有两个面板:一个作为菜单栏,另一个作为主要内容。 VerticalPanel是菜单栏,当您将鼠标移到它上面时,它会打开,显示更多选项(小部件)。问题是这个新的小部件被菜单栏下面的面板隐藏。我想显示整个小部件,即使它部分“入侵”另一个小组。我已经尝试了CSS的z-index属性,但我无法得到它。

public class Example2 implements EntryPoint {

public void onModuleLoad()
{
    //Creating the layout which one will contain two simplePanels
    DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);
    dockLayoutPanel.setStylePrimaryName("layout");

    //Creating the two Simplepanels
    SimplePanel menuPanel = new SimplePanel();
    menuPanel.setStylePrimaryName("menuPanel");
    SimplePanel mainContentPanel = new SimplePanel();
    mainContentPanel.setStylePrimaryName("mainContentPanel");

    //Adding panels to the DockLayoutPanel
    dockLayoutPanel.addNorth(menuPanel, 10);
    dockLayoutPanel.add(mainContentPanel);

    VerticalPanel vPanel = new VerticalPanel();
    //Creating some buttons
    Button a = new Button("Button");
    vPanel.add(a);
    Button b = new Button("MoreButton");
    vPanel.add(b);
    Button c = new Button("AnotherButton");
    vPanel.add(c);
    Button d = new Button("ButtonButton");
    vPanel.add(d);
    Button e = new Button("LastButton");
    vPanel.add(e);

    //Adding the buttons to the menuPanel(simplePanel)
    menuPanel.add(vPanel);

    RootLayoutPanel rp = RootLayoutPanel.get();
    rp.add(dockLayoutPanel);
}
}

和.css

.layout{
    font-size:10px;
}

.menuPanel{
    background:#e8f8ff;
}

.mainContentPanel{
    background:#eee9e9;
}

通过这个例子你可能会看到我的观点。我知道这是一个愚蠢的,但它显示了我的问题。添加到vPanel的按钮只要占据menuPanel中的空格即可显示,其余按钮隐藏在mainContentPanel下。

1 个答案:

答案 0 :(得分:0)

可以像更改将菜单面板和主面板添加到其父窗口小部件的顺序一样简单。首先添加主面板,然后添加菜单面板。显然,如果没有看到你的代码,很难确定。

相关问题