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

当浏览器窗口签约时，您会看到 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属性放在＆＃34; v-slot＆＃34;元素对我有用，我测试了风格：

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

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

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

1 个答案: