Vaadin

Question

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 );
    }
}

当浏览器 window 收缩时你会看到 Field2 真的 squishes Field1（字幕重叠，事实上，如果 Field2 的宽度更宽，它会完全挤压 Field1，使其最终重叠而消失）。

如何将最小宽度应用于 TextField 以限制挤压并防止最终重叠？

Answer 1

我尝试了您的示例并尝试了 CSS。查看 Vaadin 生成的 HTML，你有一个像

这样的结构

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

直接对字段设置 min-width 无效。但是，将 min-width CSS 属性放在 "v-slot" 元素上对我有用，我用 style:

进行了测试

.v-horizontallayout .v-slot {
    min-width: 150px;
}

要解决这样的样式问题，我认为使用 Firefox 内置开发工具或 Firebug 插件更改样式很方便，直到获得所需的效果并将其应用到 CSS/SCSS之后归档。

Vaadin - 如何限制组件的松软和重叠？

Vaadin - How to limit component squishiness and overlap?

vaadin7