1

我将 vaadin 与 navigator7 插件结合使用。在页眉和页脚中，我不会有组件之间的间距。我尝试使用 setSpacing(false) 删除页眉和页脚组件的间距，但它可能由于插件而无法正常工作。所以我尝试使用 css 解决这个问题。下面的示例 ia 测试了 vaadin 生成的输出 html：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div div .footer-label, .footer-label{
color: green;
width: 100px !important;
}
</style>
</head>

<body>
<div class="my-footer">
<div>
<div style="color: red; height: 20px; width: 482px; overflow: hidden; float: left;    padding-left: 0px; padding-top: 0px; background-color:yellow;">
<div style="float: left; margin-left: 0px;">
<button class="footer-label" style="width: 400px;">Text</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

div div 里面有一个按钮。我想让根 div 的宽度与按钮的宽度完全相同。

我以这个 css 代码结束，但它不起作用。根 div 的宽度保持在 482 像素。

div div .footer-label, .footer-label{
color: green;
width: 100px !important;
}

瓦丁密码



 public class MyAppLevelWindow extends HeaderFooterFixedAppLevelWindow {    

    @Override
    protected Component createHeader() {
        ...
    }

    @Override
    protected Component createFooter() {
        HorizontalLayout myFooter = new HorizontalLayout();
        akmedFooter.setSpacing(false);
        akmedFooter.setStyleName("my-footer");

        NativeButton sendProblemButton = new NativeButton("Button");
        sendProblemButton.setStyleName("footer-label");
        myFooter.addComponent(sendProblemButton);
        .....

        return myFooter;
    }

    .............
    }

请帮助我使用 css 解决此问题。

4

3 回答 3

1

这里的问题是 FixedApplLevelWindow 为从 createHeader() 和 createFooter() 方法返回的页眉和页脚设置了固定宽度。请参阅 FixedApplLevelWindow 中的 pageWidth。这意味着从您的 createFooter() 方法返回的 Horizo​​ntalLayout 获得了这个宽度，并且 Horizo​​ntalLayout 在这种情况下工作，以便它划分布局的子组件的宽度，以便每个组件都获得相同的大小。因此，页脚内的组件之间实际上没有间距，组件的插槽刚好大于组件的宽度。尝试为页脚布局中的组件说 setWidth("100%") 并且“间距”消失了。现在组件使用插槽中的所有可用空间。

解决此问题的一种方法是将组件包装在另一个 Horizo​​ntalLayout 中。Horizo​​ntalLayout 的宽度默认是未定义的（setWidth(null)），这意味着布局从其子项计算其宽度。

protected Component createFooter() {
    HorizontalLayout myFooter = new HorizontalLayout();
    myFooter.setStyleName("my-footer");

    HorizontalLayout layout = new HorizontalLayout();

    NativeButton sendProblemButton = new NativeButton("Button 1");
    sendProblemButton.setStyleName("footer-label");
    layout.addComponent(sendProblemButton);

    NativeButton sendProblemButton2 = new NativeButton("Button 2");
    sendProblemButton2.setStyleName("footer-label");
    layout.addComponent(sendProblemButton2);

    myFooter.addComponent(layout);

    return myFooter;
}

有关详细信息，请参阅《Vaadin 之书》中的6.12 布局格式。

于 2012-08-29T22:26:08.597 回答
0

试试这个

div div .footer-label{
color: green;
width: 100px!important;
}
于 2012-08-28T11:37:20.193 回答
0

宽度似乎是通过 javascript 或直接内联服务器端设置的。您应该首先防止这种行为，例如通过调用一些 jQuery javascript：

$('body > div').css({width: ""});

然后，这个css应该可以工作

body > div{
    width: 100px !important;
}
于 2012-08-28T11:39:57.623 回答