Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
How to center horizontally a content in Vaadin
Hi
I'm a Java JSF web developer and new to Vaadin. I started to develop an application in Vaadin to learn it.
So, I have a simple page with fixed size (horizontalLayout for now) with some griids and butons and I want to have it centered horizontally, if the screen is bigger. I tried with gridLayout (3,3) with my content in the middle, but did not work as expected.
So, what is the easiest way (or the right way) to center a page or content in Vaadin.
And, second. What is the main difference between Layouts and Panel?
Thanks for your help.
Aleksander
If you have horizontalLayout or verticalLayout and component or set of components, which you want in the middle of the window you should set the component alignment from the parent layout component. So let us assume your parent layout component (the horizontalLayout) is "layout" the following should do the trick.
layout.setComponentAlignment(myComponent, Alignment.MIDDLE_CENTER);
Component "myComponent" will be placed now in the middle. If you have set of component, make myComponent a layout component with certain width and height and place you components there.
Your answer helped me to understand how to do it. This works now. But now I have another issue.
Like indicates the attached snap, the vertical top aligment does not match with the grid width. Yes, because of 3 grid components in the fixed horizontal layout the space is divided by 33,xxxxx % each and the 2nd grid (smaller one) looks like not to be centered. How can I achieve that grid's size matches with alignment size, in my case 36% - 27% - 36%.
How to control margin/padding of a grid or any component? With my one theme?
Aleksander
Hi Aleksander,
you can fix your problem by using setExpandRation:
parentLayout.addComponents(component1, component2, component3);
parentLayout.setExpandRatio(component1, 0.36f);
parentLayout.setExpandRatio(component2, 0.27f);
parentLayout.setExpandRatio(component3, 0.36f);
Basic questions are almost always explained in the wiki.
Hi
well, I solved my "little" problem, but now I have another one(s).
I really don't want to bother with trivial cuestions, but VAADIN is a bit diferent from JSF or swing programming and takes some time to adopt to it. I'm developing my first program in VAADIN. Also, often the examples of how to do something in VAADIN are not clear enough or complete.
How to use my sass theme I still don't get it.
I thought the valo is default theme, but seems not to be, because when I include @Theme("valo") annotation
it changed the design of my page completely, the grids desapered and so on.
I work with VAADIN 7.5.1.
I use netbeans 8.0.2
I want to include my theme. I created cnstema in web-inf/VAADIN/themes/cnstema.scc
I put in it:
@import "../reindeer/legacy-styles.css";
.v-app {
background: yellow;
}
and
@Theme("cnstema") in the main class and VAADIN can't find my theme.
Tomcat says:
serveStaticResourcesInVAADIN Requested resource [/VAADIN/themes/cnstema/styles.css] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.
VAADIN at generating the page throws this:
http://localhost:8080/CapitanNemoStock/VAADIN/themes/cnstema/styles.css?v=7.5.1 loadTheme @ vaadinBootstrap.js?v=7.5.1:34window.vaadin.window.vaadin.initApplication.bootstrapApp @ vaadinBootstrap.js?v=7.5.1:212window.vaadin.window.vaadin.initApplication @ vaadinBootstrap.js?v=7.5.1:237(anonymous function) @ (index):21
So, I really don't know what I'm doing wrong.
Thanks.
Aleksander
Hi Aleksander,
You have to compile the theme first. I don't know how it's done in Netbeans, but there's plenty of information on that.
Please open a new topic for each issue, you will get help quicker.
Hi,
Sorry, I don´t understand.FIrst, which theme i have to compile first? reindeer or my theme?
And second, I have to compile from .scss to css, I suppose? But I don't understand, why?
my theme exist only as css file, and also reindeer theme as legacy-styles.css.
So, I'm confused.
Aleksander
I guess you should rename and move web-inf/VAADIN/themes/cnstema.css to web-inf/VAADIN/themes/cnstema/styles.css, should work that way.
No, this was my mistake. The path was(is) correct. Now I have in my file styless.scss
@import "../reindeer/reindeer.scss";
.cnstema {
@include reindeer;
}
cnstema.v-app {
background: yellow;
}
I understand now that this need to be compiled. But now I want to know how to include reindeer theme
into my styles.css theme without sass.
I couldn´t make it work java -cp '../../../WEB-INF/lib/*' com.vaadin.sass.SassCompiler styles.scss styles.css
I put between '...' the complete path 'E:\....' anyway the main class could not be found.
I managed sass compiler to work -:), but now i have another issues:
VAADIN "made me" compile every scss file from reindeer and base theme. I wonder if this is really necessary?
So, I copied to VAADIN/themes all the files sass compiler required and then this error occurr.
Error: Undefined operation: "none times -1".on line 409 of E:/Proyects/CapitanNemoStock/web/WEB-INF/VAADIN/themes/base/grid/grid.scss, in `base-grid'
.#{$primaryStyleName}-editor-footer {
display: table;
height: $v-grid-row-height;
border-top: $v-grid-cell-horizontal-border;
margin-top: nth($v-grid-cell-horizontal-border, 1) * -1; // line 409
background: $v-grid-row-background-color;
padding: 0 5px;
+ .#{$primaryStyleName}-editor-cells > div { // editor marks here an error "Unexpected Token" !!!
border-bottom: none;
border-top: $v-grid-cell-horizontal-border;
}
&:first-child {
border-top: none;
margin-top: 0;
border-bottom: $v-grid-cell-horizontal-border;
margin-bottom: nth($v-grid-cell-horizontal-border, 1) * -1;
}
}
I still would like to know how to use my theme including one of the VAADIN directly.
Thanks.
Aleksander