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.
Field alignment issue
I would like 3 fields next to each other:
CITY, STATE and ZIP
I would like STATE and ZIP to be fixed width and aligned with the right side of the page, with the CITY field expanding and contracting with page resizes (filling 100% of the space between itself and STATE).
I've played around with various HorizonalLayout's, using in combination and I come close to getting it right, but it's just not working. While I can get the CITY field to expand and contract, there's a huge gap between it and STATE. I got STATE and ZIP to align with the right side however.
CITY STATE ZIP
[ < -- expand and contract w/ page resizes --> ] [ ] [ ]
<-- move left and right
w/ page resize -->
When I expand the browser window, an ever increasing gap forms between CITY and STATE.
I have the following setting on my CITY field:
city.setWidth("100%");
And the layout code is this:
HorizontalLayout horzStateZip = new HorizontalLayout(state, zipCode);
horzStateZip.setSpacing(true);
HorizontalLayout horzCity = new HorizontalLayout(city);
horzCity.setSpacing(true);
horzCity.setWidth(100, Unit.PERCENTAGE);
HorizontalLayout horzRow = new HorizontalLayout(horzCity, horzStateZip);
horzRow.setSpacing(true);
horzRow.setWidth(100, Unit.PERCENTAGE);
horzRow.setComponentAlignment(horzStateZip, Alignment.MIDDLE_RIGHT);
this.setContent(horzRow);
Try something like this:
HorzontalLayout h = new HorizontalLayout(city,state,zip);
h.setWidth("100%");
h.setExpandRatio(city,1);
setContent(h);
Jonas Ohlsson: Try something like this:
HorzontalLayout h = new HorizontalLayout(city,state,zip);
h.setWidth("100%");
h.setExpandRatio(city,1);
setContent(h);
You nailed it. Thank you.