Vaadin - 如何限制组件的松软和重叠? [英] Vaadin - How to limit component squishiness and overlap?

问题描述

瓦丁 7.6.2

考虑这个例子:

import com.vaadin.ui.Horizo​​ntalLayout;导入 com.vaadin.ui.Panel;导入 com.vaadin.ui.TextField;公共类 MyClass 扩展面板 {TextField myField = new TextField();TextField myField2 = new TextField();Horizo​​ntalLayout hLayout = new Horizo​​ntalLayout();公共 MyClass() {极好的();应用设置()；}私有无效 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，使其最终重叠而消失).

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

解决方案

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

这样的结构

<div style="v-expand"><div style="v-slot">...<输入.../>...

将 min-width 直接设置为字段不起作用.但是，将 min-width CSS 属性放在v-slot"元素上对我有用，我用样式进行了测试:

.v-horizo​​ntallayout .v-slot {最小宽度:150px；}

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

Vaadin 7.6.2

Consider this example:

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

When the browser window is contracted you will see that Field2 really squishes Field1 (captions overlapping, in-fact, if Field2 width was even wider, it would squish Field1 completely making it vanish by ultimately overlapping it).

How may I apply a minimum width to a TextField to limit the squishing AND prevent the eventual overlap?

解决方案

I tried your example and played a bit with CSS. Looking at the HTML that Vaadin is generating, you have a structure like

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

Setting min-width directly to the field did not work. However, putting the min-width CSS property on "v-slot" element worked for me, I tested with style:

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

To solve styling problems like this, I think it's handy to change styles inplace with Firefox built-in development tools or Firebug plugin until you have the desired effect and apply it to your CSS/SCSS file afterwards.

这篇关于Vaadin - 如何限制组件的松软和重叠?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！