The first release candidate for Vaadin 10 has been unleashed and I have just started to migrate some of my Vaadin 7/8 projects to version 10. As I prefer a server side programming model for Vaadin projects, I did not have many problems with the server side. The client components as well as the layout and styles for these components have completely changed in Vaadin 10.

I recently developed a NumberField component that looks and behaves just like a Vaadin TextField, but only accepts numbers (decimal and integer). I used some server
side enhancements to a TextField component and made the component type safe, so that the value is not a text but a BigDecimal or a Long. When I had the NumberField working in a Vaadin 10 project, I was happy with the behaviour, but wanted the input of the field to appear with right alignment, because this looks better for number inputs.

default field with left aligned text

Vaadin 10 uses web components on the client side. Web components have their styles, layout and behaviour encapsuled in a (Vaadin 10 uses Polymer 2) html file.

I looked for the file containing the styles of the vaadin text component and found it at Github.

:host([theme~="small"]) {
  font-size: var(--lumo-font-size-s);
  --lumo-text-field-size: var(--lumo-size-s);
}

:host([theme~="small"][has-label]) [part="label"] {
  font-size: var(--lumo-font-size-xs);
}

:host([theme~="small"][has-label]) [part="error-message"] {
  font-size: var(--lumo-font-size-xxs);
}

:host([theme~="align-center"]) [part="value"] {
  text-align: center;
  --_lumo-text-field-overflow-mask-image: none;
}

:host([theme~="align-right"]) [part="value"] {
  text-align: right;
  --_lumo-text-field-overflow-mask-image: none;
}

Here I found some styles for text alignment and general appearance. For example to apply the “align-right” class for my NumberField component I needed to call the setAttribute method of the element:

getElement().setAttribute("theme", "align-right");

Now the component looks like this:

number field with right aligned numbers

This was quite difficult to find out, as I am new to web components in general and I am not an expert css master. It would be nice to have all available style classes as static constants in a java api, so that we don’t have to look up the classes in the html source code or the documentation of the component. Some documentation about styles in Vaadin 10 components can be found in the javascript parts of the component documentation, e. g. vaadin-text-element lumo styles

By Meik Kaufmann

I am a certified oracle enterprise architect and like to share my knowledge and experience that I gain in the projects I am working on.

Leave a Reply

Your email address will not be published. Required fields are marked *