鉴于以下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%");
我得到两个滚动条:
当我使用像素作为宽度和高度时:
panel.setWidth("500px");
panel.setHeight("300px");
两个滚动条都消失了:
如何将%用于宽度和高度,并使Vaadin不显示滚动条?
Vaadin 7.1.8
答案 0 :(得分:1)
我发现通过扩展例如引入您自己的主题runo或驯鹿总是付钱。然后,您可以在panel
上声明一个类,并在CSS中而不是在代码中设置其宽度/高度。这种方式是浏览器在任何JS执行之前设置大小,所以在JS之前就知道在这种情况下不需要滚动条。
答案 1 :(得分:1)
这是因为使用GridLayout编写
main.setComponentAlignment(panel, Alignment.MIDDLE_CENTER);
它实际上在屏幕中间设置了gridlayout-slot,使其100%大小的屏幕,而这50%是你的面板 - 对我而言似乎是一个错误......
解决方法是使用不同的布局,使用VerticalLayout它将起作用。或使用CustomLayout伪造网格布局。
答案 2 :(得分:0)