Alignment.MIDDLE_RIGHT. What happens when oversized


I am trying to improve my current Title Bar in my Vaadin spring-boot application.
I currently use Spring boot 2.1.0
Vaadin is 8.4.5
The application version itself is currently 2.1.0-SNAPSHOT.

The “Banner” titlebar (as I name it) looks quite fine. It get to have what I want with :

  • on the left : a HorizontalLayout, with versions informations and providers access.
  • in the middle : another HorizontalLayout (centered) with like a company logo and a title.
  • on the rigth : a thirg horizontalLayout with
    • an admin button which appeas only if the user isAdmin() from my SecurityService bean
    • the time
    • a nativeSelect inside a VerticalLayout to change the Theme
    • the user authentication and parameters
    • a username button (like a link) navigating to a userProfileView
    • a logout button (like a link)

the 3 horizontalLayout inside my Banner which is itself a HorizontalLayout with setWith(“100%”) are respectivelly aligned : Middle_Left/center/right

However depending on the size display in the bowser, It looks like the right HL get limitied to start only from the 2/3 of the widht. This makes that the right farmost buttons may get hidden as they are outside of the browser display area.

Here are some samples.
33% and 50% looks fine
Please see files attached.

from 67% and more the components start to disapear and we can notice the “admin” red button always starts from the same position.
please see file attached.

I already followed this without finding a resolution :

Here is my source for the Banner HL :

package com.cflamain.ui.commons;

import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;

import org.springframework.beans.factory.annotation.Autowired;

import com.cflamain.ui.auth.LoginInfoFactory;
import com.cflamain.ui.login.LoginUI;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.ExternalResource;
import com.vaadin.server.Page;
import com.vaadin.shared.Version;
import com.vaadin.spring.annotation.SpringComponent;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.Component;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Link;
import com.vaadin.ui.UI;
import com.vaadin.ui.themes.ValoTheme;

public class TELSBannerLayoutFactory implements UIComponentBuilder {
	private TELSLogoLayoutFactory telsLogoLayoutFactory;
	private BuildProperties buildProperties;
	private TELSThemeSelectorLayoutFactory telsThemeSelectorLayoutFactory;
	private AuthorisationService authorisationService;
	private class BannerLayout extends HorizontalLayout {
		private Component vlLogoTalend;
		private Component vlLogoCompany;
		private Component vlThemeSelector;
		private Label applicationNameLabel;
		private Label applicationLongNameLabel;
		private Label versionLabel;
		private Label user;
		private Label poweredVaadin;
		private Label displayDate;
		private Link applicationNameLink;
		private Link poweredVaadinLink;
		private Button bApplicationLongName;
		private Button bLogout;
		private Button bUser;
		private Button bAdmin;
		//Get Vaadin framework version
		//Vaadin 6
		//use constant : com.vaadin.terminal.gwt.server.ApplicationServlet.VERSION
		//use Static method : com.vaadin.shared.Version.getVersion();
		// Version.getFullVersion();
		public BannerLayout init() {
			vlLogoTalend = telsLogoLayoutFactory.createComponent();
			vlLogoCompany = telsLogoLayoutFactory.createCompanyComponent();
			vlThemeSelector = telsThemeSelectorLayoutFactory.createComponent();
			applicationNameLabel = new Label("TELS Application");
			applicationNameLink = new Link("TELS Application", new ExternalResource(""));
			applicationNameLink.setDescription("Talend Consulting TELS Sources and project Management");
			poweredVaadinLink = new Link("powered by Vaadin v"+Version.getFullVersion(), new ExternalResource(""));
			poweredVaadinLink.setDescription("Vaadin Framework OpenSource, build WebApp as in good old java Swing, but also with Spring-boot and Javascripts");
			applicationLongNameLabel = new Label("TalendEnterprise Licence Store");
			versionLabel = new Label(buildProperties.getVersion());
			poweredVaadin = new Label("powered by Vaadin v"+Version.getFullVersion());
			//KO due to VV displayDate = new Label("yyyy-MM-dd HH:mm VV zzzz")) );
			displayDate = new Label("yyyy-MM-dd HH:mm:ss")) );
			bApplicationLongName= new Button("TalendEnterprise Licence Store");
			user = new Label(SecurityContextHolder.getContext().getAuthentication().getName());
			bLogout = new Button("Logout", e -> {
				String currentURI = UI.getCurrent().getPage().getLocation().toString();
				System.out.println("before : "+currentURI);
				System.out.println("after  : "+currentURI+"/.."+LoginUI.PATH);
			bLogout.addStyleNames(ValoTheme.BUTTON_LINK, ValoTheme.MENU_ITEM);
			bUser = new Button(SecurityContextHolder.getContext().getAuthentication().getName(), e -> {
				Page.getCurrent().setTitle("User Profile");
			bUser.addStyleNames(ValoTheme.BUTTON_LINK, ValoTheme.MENU_ITEM);
			bAdmin = new Button("Admin");
			return this;
		public BannerLayout load() {

			return this;
		public BannerLayout bind() {

			return this;
		public BannerLayout layout() {
			HorizontalLayout hlLeft = new HorizontalLayout();
			HorizontalLayout hlCenter = new HorizontalLayout();
			HorizontalLayout hlRight = new HorizontalLayout();
			hlLeft.addComponents(vlLogoTalend, applicationNameLink, versionLabel, poweredVaadinLink);
			hlCenter.addComponents(vlLogoCompany, bApplicationLongName);
			hlRight.addComponents(displayDate, vlThemeSelector, bUser, bLogout);
			if (authorisationService.isAdmin())
			addComponents(hlLeft, hlCenter, hlRight);
			setComponentAlignment(hlLeft, Alignment.MIDDLE_LEFT);
			setComponentAlignment(hlCenter, Alignment.MIDDLE_CENTER);
			setComponentAlignment(hlRight, Alignment.MIDDLE_RIGHT);
			//setExpandRatio(hlLeft, 1);
			//setExpandRatio(hlCenter, 1);
			//setExpandRatio(hlRight, 1);
			return this;
	public Component createComponent() {
		return new BannerLayout()

Would someone have an idea how I could have the rightHL to use more space on his left, going above the apparent limits that only let him start from the 2/3 of the width ?

P.S.: my default theme “TELS” is based on Valo, and only provided some coloration for a specific FileTree

I hope someone can either confirm the limitation of the Alignment.MIDDLE_RIGHT, or some hero would have an idea how to reorganize the HorizontalLayouts, to reach a better scalable display.

Best Regards,
FLAMAIN Christophe


at 200% everything collapse together.
Any plan how to avoid this ?