Vaadin 23：如何缩小FormLayout单元格内Button宽度并左对齐

FormLayout的单元格默认会强制子组件占满可用宽度，这就是你直接调用setWidth()无效的原因。可以通过以下两种方式解决：

• 直接设置Button的对齐与宽度
  给Button指定自身在Flex布局中的左对齐规则，再设置合适宽度：

  Button button = new Button(new Icon(VaadinIcon.EDIT));
  // 让按钮在单元格内左对齐
  button.setAlignSelf(FlexComponent.Alignment.START);
  // 设置宽度为自适应内容，也可以用固定值如"40px"
  button.setWidth("fit-content");
  formLayout.add(button);
  

• 用容器包裹Button实现灵活布局
  把Button放在HorizontalLayout容器中，让容器占满单元格宽度并左对齐内部元素：

  HorizontalLayout buttonWrapper = new HorizontalLayout();
  buttonWrapper.setWidthFull();
  buttonWrapper.setAlignItems(FlexComponent.Alignment.START);
  
  Button button = new Button(new Icon(VaadinIcon.EDIT));
  button.setWidth("fit-content"); // 或设置固定宽度
  buttonWrapper.add(button);
  
  formLayout.add(buttonWrapper);
  

目前我能正常访问该页面并查看演示示例，你遇到的问题可以从以下几个方向排查：

• 清除浏览器缓存，用Ctrl+Shift+R强制刷新页面
• 禁用广告拦截、隐私防护类浏览器扩展后重试
• 切换网络环境（比如从内网切换到公共网络）测试
• 暂时的官网服务波动，稍后再访问尝试

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