在垂直布局Vaadin中，按钮是不可点击的？

Question

大家好我有这个布局：

这是MainLayout类：

public class MainLayout extends VerticalLayout {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    private VerticalLayout upperSection = new VerticalLayout();
    private HorizontalSplitPanel lowerSection = new HorizontalSplitPanel();
    private VerticalLayout menuLayout = new VerticalLayout();
    private VerticalLayout contentLayout = new VerticalLayout();

    public MainLayout() {
        upperSection.addComponent(new Label("Header"));
        menuLayout.addComponent(new Label("Menu"));
        contentLayout.addComponent(new Label("Content"));
        lowerSection.addComponent(menuLayout);
        lowerSection.addComponent(contentLayout);
        addComponent(upperSection);
        addComponent(lowerSection);
        showBorders();

        setSizeFull();
        lowerSection.setSizeFull();
        // menuLayout.setSizeFull();
        contentLayout.setSizeFull();
        setExpandRatio(lowerSection, 1);

        //lowerSection.setSplitPosition(30);
    }

    private void showBorders() {
        String style = "v-ddwrapper-over";
        setStyleName(style);
        upperSection.setStyleName(style);
        lowerSection.setStyleName(style);
        menuLayout.setStyleName(style + "-menu");
        contentLayout.setStyleName(style + "-content");
    }

    @SuppressWarnings("serial")
    public void addMenuOption(String caption, final Component component) {
        Button button = new Button(caption);
        menuLayout.addComponent(button);

        button.addClickListener(new ClickListener() {

            @Override
            public void buttonClick(ClickEvent event) {
                contentLayout.removeAllComponents();
                contentLayout.addComponent(component);
            }
        });
    }
}

此布局类扩展了VerticalLayout并构造了布局的基本结构，addMenuOption方法在左侧菜单列中添加了一个按钮，并为其单击了一个监听器，这样当用户点击按钮时，右侧的内容布局应该将其内容从当前切换到使用按钮绑定的内容，现在位于UI的init方法中：

protected void init(VaadinRequest request) {
        MainLayout layout = new MainLayout();
        layout.addMenuOption("Option 1", new Label("Component 1"));
        layout.addMenuOption("Option 2", new Label("Component 2"));

        setContent(layout);
}

实际上我得到的结果是：

但我的问题是这两个按钮（选项1，选项2）都没有可点击。

问题出在哪里？

感谢您的关注！

Answer 1

你是对的。添加样式＆＃34; v-ddwrapper-over＆＃34;其中一个组件使按钮不可点击。让我们看一下style.css文件中这个样式的定义。

.appName .v-ddwrapper-over:before, .so5 .v-ddwrapper-over:after {
content: "";
position: absolute;
z-index: 10;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
border: 0 solid #197de1;
}

重要的是带有z-index的第四行。这会将一个组件（DOM中更具特殊性的div）带到前面，覆盖所有其他具有较少z-index值的组件（通常它们为0）。

如果您确实需要将此样式应用于所有组件（对我来说似乎很奇怪），请考虑为具有更高z-index值的按钮添加其他样式。

详细了解z-index属性here。