Vaadin7中Upload组件上传按钮未按预期换行渲染问题咨询

问题复现代码 #

实现逻辑参考Vaadin7官方Upload组件文档编写，代码如下：

@SuppressWarnings("serial")
public class ApplicationLayout extends VerticalLayout implements View {   

    public ApplicationLayout() {
        ImageUploader receiver = new ImageUploader();
        Upload upload = new Upload(null, receiver);
        upload.setButtonCaption("Inizio Upload");
        upload.addSucceededListener(receiver);
        
        final HorizontalLayout uploadInfoLayout = new HorizontalLayout();
        uploadInfoLayout.addComponent(upload);
        
        addComponent(uploadInfoLayout);
    }
}

• 当前实际渲染效果：
  
• 预期效果：将Inizio Upload按钮放置在提示文本下方，单独占一行，参考效果：
  

问题原因 #

Vaadin7的Upload组件默认使用内置水平布局排列内部元素（状态提示文本、文件选择框、上传按钮），外层套的HorizontalLayout/VerticalLayout只能控制Upload组件本身的位置，无法改变组件内部元素的排列规则，因此默认情况下按钮会和文件选择框同行显示，不会自动换行到提示文本下方。

解决方法 #

Vaadin7没有提供直接修改Upload内部布局方向的Java API，最简便无侵入的方案是通过自定义CSS调整内部元素的排列规则：

1. 首先给Upload组件添加自定义样式名，避免全局样式污染：

   // 放在Upload初始化代码后即可
   upload.addStyleName("block-upload-btn");
   

2. 在项目的自定义样式表中添加如下CSS规则：

   /* 让文件选择框、上传按钮各自单独占一行 */
   .v-upload.block-upload-btn .v-upload-input,
   .v-upload.block-upload-btn .v-button {
       display: block;
       margin-top: 8px; /* 可根据实际UI需求调整和上方元素的间距 */
   }
   

添加后刷新页面即可看到按钮自动换行到提示文本和文件选择框下方，和预期效果一致。

内容的提问来源于stack exchange，提问作者fraaanz