How to center horizontally a content in Vaadin

Vaadin 6 / 7 / 8
1

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

2

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.

3

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

21030.jpg

4

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.


https://vaadin.com/book/-/page/layout.orderedlayout.html

5

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:
[color=#000080]
@import “…/reindeer/legacy-styles.css”;

.v-app {
background: yellow;
}
[/color]

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

6

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.

7

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

8

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.

9

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.

10

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;

[color=#0000FF]
[size=2]

[/size]
[/color]

+

[color=#0000FF]
[size=2]
.#{$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;
}

}
[/size]
[/color]

I still would like to know how to use my theme including one of the VAADIN directly.
Thanks.

Aleksander