Vaadin 瓦丁-如何限制组件的扭曲和重叠？

瓦丁7.6.2

考虑这个例子：

import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TextField;

public class MyClass extends Panel {

    TextField        myField  = new TextField();
    TextField        myField2 = new TextField();
    HorizontalLayout hLayout  = new HorizontalLayout();

    public MyClass() {
        super();
        applySettings();
    }

    private void applySettings() {

        myField.setCaption( "Field1" );
        myField.setWidth( 100, Unit.PERCENTAGE );

        myField2.setCaption( "Field2" );
        myField2.setWidth( 25, Unit.EM );

        hLayout.addComponents( myField, myField2 );
        hLayout.setExpandRatio( myField, 1 );
        hLayout.setWidth( 100, Unit.PERCENTAGE );
        hLayout.setSpacing( true );
        hLayout.setMargin( true );

        this.setContent( hLayout );
    }
}

当浏览器窗口收缩时，您将看到Field2确实挤压Field1（字幕重叠，事实上，如果Field2的宽度更宽，它将挤压Field1，最终使其重叠而消失）

---

如何对文本字段应用最小宽度以限制挤压并防止最终重叠？

我尝试了您的示例并使用了CSS。查看Vaadin生成的HTML，您有一个如下的结构

<div style="v-horizontallayout ...">
 <div style="v-expand">
  <div style="v-slot">
    ...
      <input .../>
    ...
  </div>
 </div>
</div>

---

为了解决这样的样式问题，我认为在Firefox内置开发工具或Firebug插件中更改样式是很方便的，直到您获得所需的效果，然后将其应用到CSS/SCSS文件。

您是否尝试通过CSS在字段1上设置最小宽度？是的。我创建了这样一个样式名：

.v-panel-minwidth.v-panel{min-width:700px；}

并这样调用它：

this.setStyleName（“minwidth”）

。我还玩了

这个.setWidth（“700px”）

——什么都不管用。我的字段（如上面的例子）位于

面板中，我想限制面板的宽度。如果有人问我，我也这样做了：
.v-Panel-minwidth.v-Panel{min width:700px！important；}
--仍然不起作用。因为它不能与
面板一起工作，我想我会在我的
组合框
组件（在我正在处理的真实表单上）上尝试它，所以我做了这个
.v-filterselect-minwidth.v-filterselect{min width:10em！important；}
并像这样调用它
myCombo.setStyleName（“minwidth”）--仍然被遗忘。只是想知道，您将Field1设置为100%，这使我认为Field2没有空间是正常的。另外，如果将Field1的expandRatio设置为1，我相信没有必要显式地为Field1设置宽度。因此，在我的例子中，由于我需要限制
面板的宽度，这起作用了
.v-verticallayout-fixed.v-Panel{min-width:590px；}
，我这样称呼它
myLayout.setStyleName（“fixed”）
+1.
.v-horizontallayout .v-slot {
    min-width: 150px;
}