I tried to make this work but I have two vertical centering problems on the same page and they seem to be wrong in the opposite ways
It is supposed to be an about panel - centered in the window with a panel with an image on the right and some text on the left (the text on the left is upoosed to be vertically centered too
The panel displays at the top of the page because it’s component is only the height of the panel and not the window.
The text extends off the bottom of the panel and seems to vertically center on the page
any ideas?
public class AboutViewTemplate extends VerticalLayout implements View {
public AboutViewTemplate() {
setSizeFull();
HorizontalLayout aboutHContainer = new HorizontalLayout();
aboutHContainer.setStyleName("aboutContainer");
aboutHContainer.setHeight("360px");
aboutHContainer.setWidth("800px");
//addComponent(aboutHContainer);
addComponent(getAboutViewContent(aboutHContainer));
setComponentAlignment(aboutHContainer, Alignment.MIDDLE_CENTER);
}
public Component getAboutViewContent(HorizontalLayout aboutHContainer) {
VerticalLayout aboutTextVLay = new VerticalLayout();
aboutHContainer.addComponent(aboutTextVLay);
aboutTextVLay.setSizeFull();
VerticalLayout aboutSubTextVLay = new VerticalLayout();
Label aboutTitle = new Label("About Title");
aboutTitle.setStyleName("aboutTitle");
Label aboutVersion = new Label("Version: 2.23");
aboutVersion.setStyleName("aboutText");
Link aboutLink = new Link("A link",
new ExternalResource("http://www.google.com/"));
aboutLink.setStyleName("aboutText");
Link aboutPower = new Link("Another link",
new ExternalResource("http://www.google.com/"));
aboutPower.setStyleName("aboutText");
Label aboutCopyright = new Label("© Copyright 2014-2016 ");
aboutCopyright.setStyleName("aboutText");
aboutTextVLay.addComponent(aboutTitle);
aboutSubTextVLay.addComponent(aboutVersion);
aboutSubTextVLay.addComponent(aboutLink);
aboutSubTextVLay.addComponent(aboutPower);
aboutSubTextVLay.addComponent(aboutCopyright);
aboutTextVLay.addComponent(aboutSubTextVLay);
aboutTextVLay.setComponentAlignment(aboutSubTextVLay, Alignment.MIDDLE_CENTER);
Embedded aboutImageTR = new Embedded(null, new ThemeResource("images/header_images/images/docks.png"));
aboutImageTR.setHeight("320px");
aboutImageTR.setWidth("440px");
aboutImageTR.setDescription("Image");
aboutImageTR.setStyleName("aboutImage");
aboutHContainer.addComponent(aboutImageTR);
return aboutHContainer;
}
@Override
public void enter(ViewChangeListener.ViewChangeEvent viewChangeEvent) {
}
}