如何让vaadin不显示滚动条(当使用setSizeFull作为主布局时)

时间:2013-11-19 15:45:52

标签: java vaadin

鉴于以下vaading示例应用程序:

package net.kerba.vaadin7interface;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.label.ContentMode;
import com.vaadin.ui.*;

import javax.servlet.annotation.WebInitParam;
import javax.servlet.annotation.WebServlet;

/**
 * Created by IntelliJ IDEA.
 * Date: 19.11.13
 * Time: 20:48
 */

@Theme("runo")
public class MainUi extends UI {

    @Override
    protected void init(VaadinRequest request) {

        GridLayout main = new GridLayout();
        main.setSizeFull();
        main.setMargin(false);

        Panel panel = new Panel("Working area");
        main.addComponent(panel, 0, 0);

        // magic goes in 2 lines below
        panel.setWidth("500px");
        panel.setHeight("300px");

        panel.setContent(new Label("foobar");", ContentMode.PREFORMATTED));

        main.setComponentAlignment(panel, Alignment.MIDDLE_CENTER);
        setContent(main);
    }

    @WebServlet(name = "vaadinServlet",
            urlPatterns = {"/app/*", "/VAADIN/*"},
            asyncSupported = false,
            initParams = {@WebInitParam(
                    name = "widgetset",
                    value = "com.vaadin.DefaultWidgetSet"
            )}
    )
    @VaadinServletConfiguration(productionMode = false, ui = MainUi.class)
    public static class Servlet extends VaadinServlet {

    }
}

当我使用%表示宽度和高度时:

panel.setWidth("50%");
panel.setHeight("50%");

我得到两个滚动条:

enter image description here

当我使用像素作为宽度和高度时:

panel.setWidth("500px");
panel.setHeight("300px");

两个滚动条都消失了:

enter image description here

如何将%用于宽度和高度,并使Vaadin不显示滚动条?

Vaadin 7.1.8

3 个答案:

答案 0 :(得分:1)

我发现通过扩展例如引入您自己的主题runo或驯鹿总是付钱。然后,您可以在panel上声明一个类,并在CSS中而不是在代码中设置其宽度/高度。这种方式是浏览器在任何JS执行之前设置大小,所以在JS之前就知道在这种情况下不需要滚动条。

答案 1 :(得分:1)

这是因为使用GridLayout编写

main.setComponentAlignment(panel, Alignment.MIDDLE_CENTER);

它实际上在屏幕中间设置了gridlayout-slot,使其100%大小的屏幕,而这50%是你的面板 - 对我而言似乎是一个错误......

解决方法是使用不同的布局,使用VerticalLayout它将起作用。或使用CustomLayout伪造网格布局。

答案 2 :(得分:0)

我对解决方案不是很确定,但在网上推荐时。我找到了几个链接,我认为可以帮助您解决问题:

Link 1

Link 2

根据哪个

main.setComponentAlignment(panel, Alignment.MIDDLE_CENTER);

使它位于屏幕的中间,即实际上定义了一半的面板。

  1. 你可以创建另一个具有不同规格的面板,或者使用虚拟视图来解决这个问题,即。一种网格布局,仅用于格式化缩进并有效地自定义它。
  2. 使用HGap,VGap然后设置对齐方式。请参阅此example
  3. 完全使用完全不同的布局,对布局定位的当前规范进行一些更改。