One table fills to the right, the other doesn't -- why, and/or how to fix?

I’m using Vaadin Touchkit to write a mobile app. One of my views has a table as its entire content, with two columns. I have an image on the left and a NavigationButton on the right; I set a 52px width for the image, and the button takes up the rest of the horizontal space. Here’s the view containing this table:

[code]
package rc.wedding.ui;

import java.util.List;

import rc.wedding.model.Person;
import rc.wedding.model.PersonData;

import com.vaadin.addon.touchkit.ui.NavigationButton;
import com.vaadin.addon.touchkit.ui.NavigationView;
import com.vaadin.server.Resource;
import com.vaadin.ui.Image;
import com.vaadin.ui.Table;
import com.vaadin.ui.Table.ColumnHeaderMode;

@SuppressWarnings(“serial”)
public class PeopleView extends NavigationView
{
public static void say(String s) { System.out.println(s); }
@Override
public void attach()
{
super.attach();
buildUI();
}

private void buildUI()
{
setCaption(“People”);
addStyleName(“peopleView”);
setSizeFull();

/////////////////////////
Table table = new Table(“People”);
table.setSizeFull();
table.setColumnHeaderMode(ColumnHeaderMode.HIDDEN);

table.addContainerProperty("pic", Image.class, null);
table.setColumnWidth("pic", 52);
table.addContainerProperty("name", NavigationButton.class, null);
table.setColumnExpandRatio("name", 90.0f);

// VerticalLayout content = new VerticalLayout();
// content.setCaption(“People2”);
/////////////////////////

List<Person> people = PersonData.getPersonList();
int rowIndex = 1;

for (Person person : people)
{
  PersonNavigationButton button = new PersonNavigationButton(person.getFullName(), person) ;
  Resource resource = PersonData.getPersonImageResource(person.getKey());

//////////////////////////
Image image = new Image(“”, resource);
image.setWidth(“50px”);
table.addItem(new Object { image, button}, rowIndex++ );
// button.setIcon(resource);
// content.addComponent(button);
//////////////////////////
}
setContent(table);
}
}
[/code]I’m attaching an image of the page.

Here’s the second view; one difference is that, in this view, there are components above the table in the view, i.e., the table is not the entirety of the view. Some of the commented-out lines show things I’ve tried, such as setting the table size to full (as it is in the previous code), or setting the column width and/or expand ratio the way it is in the other table. None of the combinations of these that I’ve tried have worked. I don’t understand the inner workings, so I’m just trying different things at this point.

I would like the nav buttons on the second view to take up the remainder of the display width, the way they do in the first view. Can anyone tell me how to do that, or at least suggest more things to try?

Oh, I’ll put the CSS code after this view’s code, and attach a second image showing how it looks.

package rc.wedding.ui;

import java.util.List;

import rc.wedding.model.Person;
import rc.wedding.model.PersonData;
import rc.wedding.model.Relationship;

import com.vaadin.addon.touchkit.ui.NavigationButton;
import com.vaadin.addon.touchkit.ui.NavigationView;
import com.vaadin.shared.ui.label.ContentMode;
import com.vaadin.ui.CssLayout;
import com.vaadin.ui.Image;
import com.vaadin.ui.Label;
import com.vaadin.ui.Table;
import com.vaadin.ui.Table.ColumnHeaderMode;

@SuppressWarnings("serial")
public class PersonView extends NavigationView
{
  public PersonView(String key)
  {
    Person p = PersonData.get(key);
    buildUI(p);
  }
  
  public PersonView(Person p)
  {
    buildUI(p);
  }
  
  private void buildUI(Person p)
  { 
    CssLayout layout = new CssLayout();
    
    // build content from the person's name and list of relationships
    Image image = PersonData.getPersonImage(p.getKey());
    if (image != null)
    {
      image.setWidth("3in");
      layout.addComponent(image);
    }
    
    setCaption(p.getFullName());
    addStyleName("personView");
    
    String description = p.getDescription();
    if (description != null && description.length() > 0)
    {
      Label descriptionLabel = new Label(description, ContentMode.HTML);
      layout.addComponent(descriptionLabel);      
    }
    
    List<Relationship> folks = p.getRelationships();
    if (folks != null && !folks.isEmpty())
    {
      Table table = new Table(p.getFullName());
      table.setSizeUndefined();
      table.setPageLength(0);
//      table.setSizeFull();      // if I set this, the table doesn't show up.
      table.setColumnHeaderMode(ColumnHeaderMode.HIDDEN);
      table.addContainerProperty("rel", Label.class, null);
//      table.setColumnWidth("rel", 95);
      table.addContainerProperty("btn", NavigationButton.class, null);
//      table.setColumnExpandRatio("btn", 90.0f);
      int rowIndex = 1;
      
      for (Relationship r : folks)
      {
        Person otherPerson = PersonData.get(r.getPersonKey());
        if (otherPerson != null)
        {
          String relationshipText = r.getRelationshipName().toString();
          Label  relationshipLabel = new Label(relationshipText);
          relationshipLabel.addStyleName("relationshipLabel");
          relationshipLabel.setWidth("90px");
          
          PersonNavigationButton button = new PersonNavigationButton(otherPerson.getFullName(), otherPerson);
          table.addItem(new Object[] { relationshipLabel, button }, rowIndex++);
        }
      }
      layout.addComponent(table);
    }

    setContent(layout);

    NavigationButton peopleNavigationButton = new NavigationButton("People", MenuView.getPeopleView());
    setRightComponent(peopleNavigationButton);
  }
}
.wedding .v-label
{
    margin:         0px 10px 10px 10px    !important;
    padding:        10px 10px 10px 10px    !important;
    font-family:    Verdana                !important;
    font-size:        12pt                !important;
    background:        moccasin            !important;
}

.welcomeView
{
    padding: 0 15px 5px 5px            !important;
}

.wedding .v-table-cell-content
{
    padding: 1px 1px 1px 3px        !important;
}

.wedding .v-table-cell-wrapper
{
    padding: 2px 0;
}

.v-touchkit-navbar-caption
{
    color:        moccasin    !important;
    background:    green        !important;
    border-style: single    !important;
    border-width: 3px        !important;
    border-radius: 15px        !important;
}

.v-upload
{
    display: inline-block     !important;
    line-height: 2            !important;
}
.v-button
{ 
    display: inline-block    !important;
    background: moccasin !important;
    color: green            !important;
    text-align: center !important;
    border-style: double !important;
    border-width: 5px !important;
    border-radius: 15px !important;
    line-height:    2    !important;
}
.v-touchkit-navbutton         { color: moccasin !important;}
.v-touchkit-navbutton:after { color: moccasin !important;}

.v-touchkit-navbutton-back        { color: moccasin !important; font-size: 10pt}
.v-touchkit-navbutton-back:after{ color: moccasin !important;}

.wedding .v-table-row-odd
{
    background-color: white !important;
}

.wedding .v-touchkit-navview-wrapper .v-touchkit-navbutton
{
    color:         green        !important;    
    background: moccasin    !important;
    text-align: center        !important;
    border-style: double    !important;
    border-width: 5px        !important;
    border-radius: 15px        !important;
}

.wedding .v-touchkit-navview-wrapper .v-touchkit-navbutton:after
{
    color:        darkgreen    !important;
}

.menuView .v-touchkit-componentgroup-cell
{
    margin: 3px 0 !important;
}

.menuView .v-image
{
    width:            2.5in            !important;
    display:        block            !important;
    margin-left:    auto            !important;
    margin-right:    auto            !important;
    border:            1px solid        !important;
}

.peopleView .v-touchkit-navbutton
{
    line-height: 2.5        !important;
    color:        moccasin    !important;
}

.personView .v-image
{
    width:            2.5in            !important;
    display:        block            !important;
    margin-left:    auto            !important;
    margin-right:    auto            !important;
    border:            1px solid        !important;
}

.personView .relationshipLabel
{
    font-size:            11px            !important;
    font-style:            italic            !important;
    text-align:            right            !important;
    padding:             15px 0 0 0         !important;
    margin:             0 0 0 0         !important;
    background:            white            !important;
}
.personView .v-captiontext
{
    display:            block            !important;
    text-align:            center            !important;
}

28930.png
28931.png