Alignment.MIDDLE_RIGHT. What happens when oversized

Hello,

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.
https://vaadin.com/attachment/ec86de2c-bd6d-4bfd-ad26-0521db16ef32/Capture_33%.JPG
https://vaadin.com/attachment/7736f093-dd87-4267-bd55-3d8d293600fd/Capture_50%.JPG

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.
https://vaadin.com/attachment/79ee8d05-6c8d-42b1-ac2d-21aeb779678c/Capture_67%.JPG
https://vaadin.com/attachment/cc9759c8-c3d5-4843-a966-b6656bf6b121/Capture_75%.JPG
https://vaadin.com/attachment/e4df5319-8982-4e0e-9409-03f960d9766b/Capture_80%.JPG
https://vaadin.com/attachment/30505a32-0d4b-474e-93bd-05d037a1227e/Capture_100%.JPG

I already followed this without finding a resolution : https://vaadin.com/forum/thread/87125/16942342

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 org.springframework.boot.info.BuildProperties;
import org.springframework.security.core.context.SecurityContextHolder;

import com.cflamain.service.security.AuthorisationService;
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;

@SpringComponent
public class TELSBannerLayoutFactory implements UIComponentBuilder {
	
	@Autowired
	private TELSLogoLayoutFactory telsLogoLayoutFactory;
	
	@Autowired
	private BuildProperties buildProperties;
	
	@Autowired
	private TELSThemeSelectorLayoutFactory telsThemeSelectorLayoutFactory;
	
	@Autowired 
	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
		//Vaadin7
		//use Static method : com.vaadin.shared.Version.getVersion();
		//Vaadin8
		//com.vaadin.shared.
		// Version.getFullVersion();
		//Vaadin11
		//com.vaadin.flow.server.Version
		
		public BannerLayout init() {
			
			vlLogoTalend = telsLogoLayoutFactory.createComponent();
			vlLogoCompany = telsLogoLayoutFactory.createCompanyComponent();
			
			vlThemeSelector = telsThemeSelectorLayoutFactory.createComponent();
			
			applicationNameLabel = new Label("TELS Application");
			
			applicationNameLink = new Link("TELS Application", new ExternalResource("https://github.com/TalendPS/ps-talendEnterpriseStore/projects/1"));
			applicationNameLink.setDescription("Talend Consulting TELS Sources and project Management");
			applicationNameLink.setTargetName("_blank");
			
			poweredVaadinLink = new Link("powered by Vaadin v"+Version.getFullVersion(), new ExternalResource("https://vaadin.com/docs/v8"));
			poweredVaadinLink.setDescription("Vaadin Framework OpenSource, build WebApp as in good old java Swing, but also with Spring-boot and Javascripts");
			poweredVaadinLink.setTargetName("_blank");
			
			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(LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm VV zzzz")) );
			displayDate = new Label(LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss")) );
			
			bApplicationLongName= new Button("TalendEnterprise Licence Store");
			bApplicationLongName.addStyleName(ValoTheme.MENU_TITLE);
			
			user = new Label(SecurityContextHolder.getContext().getAuthentication().getName());
			//user.setIcon(VaadinIcons.USER);
			
			bLogout = new Button("Logout", e -> {
				SecurityContextHolder.clearContext();
				//UI.getCurrent().getPage().setLocation("/univers-web/login");
				String currentURI = UI.getCurrent().getPage().getLocation().toString();
				System.out.println("before : "+currentURI);
				System.out.println("after  : "+currentURI+"/.."+LoginUI.PATH);
				UI.getCurrent().getPage().setLocation(currentURI+"/.."+LoginUI.PATH);
			});
			bLogout.addStyleNames(ValoTheme.BUTTON_LINK, ValoTheme.MENU_ITEM);
			
			bUser = new Button(SecurityContextHolder.getContext().getAuthentication().getName(), e -> {
				Page.getCurrent().setTitle("User Profile");
				UI.getCurrent().getNavigator().navigateTo(LoginInfoFactory.NAME);
			});
			bUser.addStyleNames(ValoTheme.BUTTON_LINK, ValoTheme.MENU_ITEM);
			bUser.setIcon(VaadinIcons.USER);
			
			bAdmin = new Button("Admin");
			bAdmin.setStyleName(ValoTheme.BUTTON_DANGER);
			
			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.setMargin(false);
			hlCenter.setMargin(false);
			hlRight.setMargin(false);
			
			
			
			hlLeft.addComponents(vlLogoTalend, applicationNameLink, versionLabel, poweredVaadinLink);
			hlCenter.addComponents(vlLogoCompany, bApplicationLongName);
			hlRight.addComponents(displayDate, vlThemeSelector, bUser, bLogout);
			
			if (authorisationService.isAdmin())
			{
				hlRight.addComponentAsFirst(bAdmin);
			}
			
			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);
			//setSizeFull();
			//hlRight.setWidth("100%");
			//hlRight.setWidthUndefined();
			setWidth("100%");
			//setSizeUndefined();
			
			//hlLeft.setSizeUndefined();
			//hlCenter.setSizeUndefined();
			hlRight.setSizeUndefined();
			
			return this;
		}
	}
	
	public Component createComponent() {
		return new BannerLayout()
				.init()
				.load()
				.bind()
				.layout();
	}
}

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

17417681.jpg
17417684.jpg
17417687.jpg
17417690.jpg
17417693.jpg
17417696.jpg

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

17417705.jpg