Can't set TextField width

Vaadin 6 / 7 / 8 Framework UI
1

Hi.

I’m having troubles trying to set witdh to a TextField inside a HorizontalLayout.

The code:


public class TStringField extends HorizontalLayout  {
...
     TextField text = new TextField();
     addComponent(text);

     this.setWidth("250px");
     text.setWidth("250px");
}

Inspecting the resulting page, I get this:


[b]
<div class="v-horizontallayout" style="overflow: hidden; width: 250px; height: 24px;"><div style="overflow: hidden; margin: 0px; width: 250px; height: 24px;"><div style="height: 24px; width: 248px; overflow: hidden; float: left; padding-left: 0px; padding-top: 0px;"><div style="float: left; margin-left: 0px;"><input type="text" class="v-textfield" maxlength="200" style="width: 20em;"></div></div><div style="height: 24px; width: 2px; overflow: hidden; float: left; padding-left: 0px; padding-top: 0px;"><div style="float: left; margin-left: 0px;"><div class="v-label" style="width: 2px;"></div></div></div><div style="width: 0px; height: 0px; clear: both; overflow: hidden;"></div></div></div>
[/b]
     <div style="overflow: hidden; margin: 0px; width: 250px; height: 24px;"><div style="height: 24px; width: 248px; overflow: hidden; float: left; padding-left: 0px; padding-top: 0px;"><div style="float: left; margin-left: 0px;"><input type="text" class="v-textfield" maxlength="200" style="width: 20em;"></div></div><div style="height: 24px; width: 2px; overflow: hidden; float: left; padding-left: 0px; padding-top: 0px;"><div style="float: left; margin-left: 0px;"><div class="v-label" style="width: 2px;"></div></div></div><div style="width: 0px; height: 0px; clear: both; overflow: hidden;"></div></div>
          <div style="height: 24px; width: 248px; overflow: hidden; float: left; padding-left: 0px; padding-top: 0px;"><div style="float: left; margin-left: 0px;"><input type="text" class="v-textfield" maxlength="200" style="width: 20em;"></div></div>
               <div style="float: left; margin-left: 0px;"><input type="text" class="v-textfield" maxlength="200" style="width: 20em;"></div>
                    [b]
<input type="text" class="v-textfield" maxlength="200" style="width: 20em;"
[/b]>
...
...

Why the
style=“width: 20em;”
 remains in the last line? It should be
width: 250px

Thanks!

2

In your code you’re never setting the width of the TextField. You’re only setting the width of the HorizontalLayout with this.setWidth (this is in your case the class which is the HorizontalLayout). A TextField by default has an undefined width so it will try to set an optimal width for the content (if there is one, otherwise it defaults to some value) which in your case is 20em.

Use text.setWidth(“250px”) to set your TextField’s width.

Ups i seem to have misread the last line and thought it was this.setHeight. Sorry.

3

The code is setting the width of the TextField (although “100%” might make more sense here if wanting to fix the width of the layout).

The only ways I can see this happening are either some other line of code in your application changing it again (you could try to put a breakpoint in AbstractComponent.setWidth() methods and make it conditional on TextField.class.equals(this.getClass())) or a CSS rule with !important that overrides the width.

A further possibility could be if you are using an outdated widgetset (from the wrong Vaadin version or not recompiled if you have your own), which could lead to all kinds of strange problems.

4

Hi.
Thanks for the responses.

I tried everything you said and I haven’t had positive results. AbstractComponent.setWidth() isn’t called with “20em” parameter ever. I deactivated the theme triyng to bypass css and nothing change.

I’m using Vaadin 6.8.12. I will try with Vaadin 7, but I had to make many changes that there are nothing to do with this specific case.

Thanks!