Relative Textfieldsize

Hi guys,

is it possible to define the size of a textfield relative to the windowsize?

the textfield should also resize if you resize the window.
12692.png

nobody??

Hi,

if your window and its content (layout or other component container) has a width defined in percentage, e.g. 100% and the TextField also has e.g. 100% width, then it should extend to fill the width of the window and its contained layout.

ahh ok thank you.

but is it also possible to resize components in a form? the width of the component and form are definden in percentage…
12696.png

Well for this to work you should basically have a “tree” of relative sized components from the window up to the textfield.

For example (pseudo component hierarchy):


- Window
  - VerticalLayout
    - Form
      - FormLayout
        - TextField

So you should have a relative size for all of these (e.g. 100% if you want to fill up the whole width).

Window, VerticalLayout and FormLayout are 100% wide by default so it should be enough if you set the width to the Form and the TextField only.

ok i´ll try

thx 4 your help

i´ve got another question.

what is the difference between: “-1px”, “100%” and "auto??

and

i try to resize the components relative to the windowsize
where is my fault??

@AutoGenerated
	private AbsoluteLayout buildMainLayout() {
		// common part: create layout
		mainLayout = new AbsoluteLayout();
		mainLayout.setImmediate(false);
		mainLayout.setWidth("740px");
		mainLayout.setHeight("800px");
		mainLayout.setMargin(false);
		
		// top-level component properties
		setWidth("740px");
		setHeight("800px");
		
		// verticalLayout_4
		verticalLayout_4 = buildVerticalLayout_4();
		mainLayout.addComponent(verticalLayout_4,
				"top:0.0px;right:0.0px;left:0.0px;");
		
		return mainLayout;
	}

	@AutoGenerated
	private VerticalLayout buildVerticalLayout_4() {
		// common part: create layout
		verticalLayout_4 = new VerticalLayout();
		verticalLayout_4.setImmediate(false);
		verticalLayout_4.setWidth("100.0%");
		verticalLayout_4.setHeight("-1px");
		verticalLayout_4.setMargin(false);
		verticalLayout_4.setSpacing(true);
		
		// horizontalLayout_1
		horizontalLayout_1 = buildHorizontalLayout_1();
		verticalLayout_4.addComponent(horizontalLayout_1);
		
		// horizontalLayout_4
		horizontalLayout_4 = buildHorizontalLayout_4();
		verticalLayout_4.addComponent(horizontalLayout_4);
		verticalLayout_4.setComponentAlignment(horizontalLayout_4,
				new Alignment(20));
		
		// horizontalLayout_3
		horizontalLayout_3 = buildHorizontalLayout_3();
		verticalLayout_4.addComponent(horizontalLayout_3);
		verticalLayout_4.setComponentAlignment(horizontalLayout_3,
				new Alignment(6));
		
		return verticalLayout_4;
	}

	@AutoGenerated
	private HorizontalLayout buildHorizontalLayout_1() {
		// common part: create layout
		horizontalLayout_1 = new HorizontalLayout();
		horizontalLayout_1.setImmediate(false);
		horizontalLayout_1.setWidth("100.0%");
		horizontalLayout_1.setHeight("100.0%");
		horizontalLayout_1.setMargin(false);
		horizontalLayout_1.setSpacing(true);
		
		// tbl_artifact
		tbl_artifact = new Table();
		tbl_artifact.setImmediate(false);
		tbl_artifact.setWidth("90.0%");
		tbl_artifact.setHeight("100.0%");
		horizontalLayout_1.addComponent(tbl_artifact);
		
		// verticalLayout_6
		verticalLayout_6 = buildVerticalLayout_6();
		horizontalLayout_1.addComponent(verticalLayout_6);
		horizontalLayout_1.setComponentAlignment(verticalLayout_6,
				new Alignment(6));
		
		return horizontalLayout_1;
	}

	@AutoGenerated
	private VerticalLayout buildVerticalLayout_6() {
		// common part: create layout
		verticalLayout_6 = new VerticalLayout();
		verticalLayout_6.setImmediate(false);
		verticalLayout_6.setWidth("100.0%");
		verticalLayout_6.setHeight("100.0%");
		verticalLayout_6.setMargin(false);
		verticalLayout_6.setSpacing(true);
		
		// tbl_library
		tbl_library = new Table();
		tbl_library.setImmediate(false);
		tbl_library.setWidth("90.76%");
		tbl_library.setHeight("100.0%");
		verticalLayout_6.addComponent(tbl_library);
		verticalLayout_6.setComponentAlignment(tbl_library, new Alignment(6));
		
		// horizontalLayout5
		horizontalLayout5 = buildHorizontalLayout5();
		verticalLayout_6.addComponent(horizontalLayout5);
		verticalLayout_6.setComponentAlignment(horizontalLayout5,
				new Alignment(6));
		
		return verticalLayout_6;
	}

	@AutoGenerated
	private HorizontalLayout buildHorizontalLayout5() {
		// common part: create layout
		horizontalLayout5 = new HorizontalLayout();
		horizontalLayout5.setImmediate(false);
		horizontalLayout5.setWidth("90.0%");
		horizontalLayout5.setHeight("-1px");
		horizontalLayout5.setMargin(false);
		horizontalLayout5.setSpacing(true);
		
		// btn_deselectLib
		btn_deselectLib = new Button();
		btn_deselectLib.setCaption("Button");
		btn_deselectLib.setImmediate(true);
		btn_deselectLib.setWidth("100.0%");
		btn_deselectLib.setHeight("100.0%");
		horizontalLayout5.addComponent(btn_deselectLib);
		
		// btn_selectLib
		btn_selectLib = new Button();
		btn_selectLib.setCaption("Button");
		btn_selectLib.setImmediate(true);
		btn_selectLib.setWidth("100.0%");
		btn_selectLib.setHeight("100.0%");
		horizontalLayout5.addComponent(btn_selectLib);
		
		// btn_add
		btn_add = new Button();
		btn_add.setCaption("Button");
		btn_add.setImmediate(true);
		btn_add.setWidth("100.0%");
		btn_add.setHeight("100.0%");
		horizontalLayout5.addComponent(btn_add);
		
		return horizontalLayout5;
	}

	@AutoGenerated
	private HorizontalLayout buildHorizontalLayout_4() {
		// common part: create layout
		horizontalLayout_4 = new HorizontalLayout();
		horizontalLayout_4.setImmediate(false);
		horizontalLayout_4.setWidth("100.0%");
		horizontalLayout_4.setHeight("26px");
		horizontalLayout_4.setMargin(false);
		horizontalLayout_4.setSpacing(true);
		
		// horizontalLayout_10
		horizontalLayout_10 = buildHorizontalLayout_10();
		horizontalLayout_4.addComponent(horizontalLayout_10);
		horizontalLayout_4.setComponentAlignment(horizontalLayout_10,
				new Alignment(33));
		
		// horizontalLayout_8
		horizontalLayout_8 = buildHorizontalLayout_8();
		horizontalLayout_4.addComponent(horizontalLayout_8);
		horizontalLayout_4.setComponentAlignment(horizontalLayout_8,
				new Alignment(34));
		
		return horizontalLayout_4;
	}

	@AutoGenerated
	private HorizontalLayout buildHorizontalLayout_10() {
		// common part: create layout
		horizontalLayout_10 = new HorizontalLayout();
		horizontalLayout_10.setImmediate(false);
		horizontalLayout_10.setWidth("90.0%");
		horizontalLayout_10.setHeight("-1px");
		horizontalLayout_10.setMargin(false);
		horizontalLayout_10.setSpacing(true);
		
		// btn_selectArtifact
		btn_selectArtifact = new Button();
		btn_selectArtifact.setCaption("Button");
		btn_selectArtifact.setImmediate(true);
		btn_selectArtifact.setWidth("-1px");
		btn_selectArtifact.setHeight("-1px");
		horizontalLayout_10.addComponent(btn_selectArtifact);
		horizontalLayout_10.setComponentAlignment(btn_selectArtifact,
				new Alignment(6));
		
		// btn_deselectArtifact
		btn_deselectArtifact = new Button();
		btn_deselectArtifact.setCaption("Button");
		btn_deselectArtifact.setImmediate(true);
		btn_deselectArtifact.setWidth("-1px");
		btn_deselectArtifact.setHeight("-1px");
		horizontalLayout_10.addComponent(btn_deselectArtifact);
		
		return horizontalLayout_10;
	}

	@AutoGenerated
	private HorizontalLayout buildHorizontalLayout_8() {
		// common part: create layout
		horizontalLayout_8 = new HorizontalLayout();
		horizontalLayout_8.setImmediate(false);
		horizontalLayout_8.setWidth("90.0%");
		horizontalLayout_8.setHeight("-1px");
		horizontalLayout_8.setMargin(false);
		
		// btn_restart
		btn_restart = new Button();
		btn_restart.setCaption("Button");
		btn_restart.setImmediate(true);
		btn_restart.setWidth("-1px");
		btn_restart.setHeight("-1px");
		horizontalLayout_8.addComponent(btn_restart);
		horizontalLayout_8
				.setComponentAlignment(btn_restart, new Alignment(20));
		
		return horizontalLayout_8;
	}

	@AutoGenerated
	private HorizontalLayout buildHorizontalLayout_3() {
		// common part: create layout
		horizontalLayout_3 = new HorizontalLayout();
		horizontalLayout_3.setImmediate(false);
		horizontalLayout_3.setWidth("-1px");
		horizontalLayout_3.setHeight("-1px");
		horizontalLayout_3.setMargin(false);
		horizontalLayout_3.setSpacing(true);
		
		// btn_cancel
		btn_cancel = new Button();
		btn_cancel.setCaption("Button");
		btn_cancel.setImmediate(true);
		btn_cancel.setWidth("-1px");
		btn_cancel.setHeight("-1px");
		horizontalLayout_3.addComponent(btn_cancel);
		horizontalLayout_3.setComponentAlignment(btn_cancel, new Alignment(6));
		
		// btn_ok
		btn_ok = new Button();
		btn_ok.setCaption("Button");
		btn_ok.setImmediate(true);
		btn_ok.setWidth("-1px");
		btn_ok.setHeight("-1px");
		horizontalLayout_3.addComponent(btn_ok);
		horizontalLayout_3.setComponentAlignment(btn_ok, new Alignment(6));
		
		return horizontalLayout_3;
	}

Oh, you’re using the visual editor - I’m not too familiar with that, maybe someone else can help you better.

But, I’d say at least one problem is that the mainLayout size is defined in pixels (740x800). This means that anything you put inside that layout with e.g. 100% sizing will always take 100% of the fixed pixel sizes and thus will not expand. I think you’d need to use a 100% widht and height for the mainLayout.

As for the sizing options: ‘-1’ means undefined, the component will take as much space as its content needs, but not more. ‘100%’ means that the component will take all of the space available for it within the containing layout - in your case the verticalLayout_4 would take 100% of 740px (width of the mainLayout). ‘auto’ is something that exists only in the visual editor, not sure what it does.

The size setting “auto” is just a synonym for undefined (-1).

ok thank you for the info

now i´ve set the mainlayout width and height to 100%

but the “top-level component properties” width and height can only be set as “px”

      
      @AutoGenerated
	protected AbsoluteLayout buildMainLayout() {
		// common part: create layout
		mainLayout = new AbsoluteLayout();
		mainLayout.setImmediate(false);
		mainLayout.setWidth("100%");
		mainLayout.setHeight("100%");
		mainLayout.setMargin(false);
		
		// top-level component properties
		setWidth("450px");
                setHeight("300px");

why?!

if i set the width and height to 100% there are no components shown

(sorry 4 my bad english :*))

*Edit: i think i´ve found the soulution here: https://vaadin.com/de/forum/-/message_boards/view_message/1708436