Upload button has different alignment

Originally by draken

Morning all,

Having a bit of annoying issue with some alighnment problems. First all this is using the following:

Vaadin 7.3.1 Touchkit 4.0.0 Touchkit style

So, we have a hortizontal button group inside a vertical layout. This button group has two buttons, a normal one and a Upload button that uses a ImageUploader and they are created like this:

public class ExtendsVerticalLayout extends VerticalLayout{

    private HorizontalButtonGroup buttonGroup;

    private void buildView(){
        Upload bttnUpload = new Upload();
        ImageUploader uploader = new ImageUploader(bttnUpload );
        bttnUpload .setReceiver(uploader);
        buttonGroup = new HorizontalButtonGroup();
        buttonGroup.addComponent(bttnUpload );
        Button bttnDeletePicture = new Button("Delete");
        bttnDeletePicture.setDisableOnClick(true);
        bttnDeletePicture.setIcon(FontAwesome.TRASH_O);
        buttonGroup.addComponent(bttnDeletePicture);
        addComponent(buttonGroup);
    }
}

However, this causes the attached image where the buttons are out of alignment. It would be lovely if we could get them both to behave the same way, since they look like buttons and both belong to the same button group. In the meantime, does anyone have a suggestion to fix it? Playing with the CSS, I did find removing the following style from the button (in .v-button class) almost fixes it:

overflow: hidden;

Imported from https://dev.vaadin.com/ issue #19707

vaadin / touchkit

Upload button has different alignment #420