Field alignment issue

Vaadin 6 / 7 / 8
1

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


[font=courier new]
[ < – expand and contract w/ page resizes → ]
[ ]
[ ]

[/font]

← 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);
2

Try something like this:
HorzontalLayout h = new HorizontalLayout(city,state,zip);
h.setWidth(“100%”);
h.setExpandRatio(city,1);
setContent(h);

3

You nailed it. Thank you.