vaadin 6.7, icon on right vertical alignment issue, FIXED

Hi,

I’ve noticed a problem with the new chamleon theme, vaadin 6.7.0.

When I run the code below, the icon is not vertically aligned in the middle, its actually vertically aligned to the top, which makes the button look very funny. However, if I comment out the commented line, the icon will show on the left and be properly aligned.

I’m not sure why it works in the sampler (which also works for me), I’m assuming its some side effect of whatever layout is being used for the display of all the different options. Can someone double check and let me know if I should create a jira?

Thanks,

Mark

public class EmptyApplication extends Application {
  @Override
  public void init() {
    setTheme("empty");
    
    Button testButton = new Button("test");
    testButton.setIcon(new ThemeResource("img/button_down.png"));
     testButton.addStyleName(ChameleonTheme.BUTTON_ICON_ON_RIGHT);   //comment out to test
    
    Window mainWindow = new Window("Empty Application");
    mainWindow.setSizeFull();
    mainWindow.getContent().setSizeFull();
    
    mainWindow.addComponent(testButton);
    
    setMainWindow(mainWindow);
  }
  
}

Hi,

Since the icon is placed in the right side of the caption using plain CSS float: right; the vertical-alignment doesn’t apply to it anymore, and it is actually positioned to the top of the text. It really depends on the height of the button itself whether the icon looks like it is centered or not.

I suggest you play with some margin-top on the icon to get it vertically centered.

OK, great. I’ve added a little margin and it looks great.

Here is the code for anyone that needs it:

    Button testButton = new Button("test");
    testButton.setIcon(new ThemeResource("img/button_down.png"));
    testButton.addStyleName(ChameleonTheme.BUTTON_ICON_ON_RIGHT);
    testButton.addStyleName("testButton"); 

and the css:

.testButton .v-icon{
	margin-top: 6px;
}

and the result is attached.

I really wish there was some more elegant way to do this via html…ah well.

Thanks again,

Mark

PS. Might be nice to have this in the sampler so you don’t have to answer this question again…
11960.png