textfield setwidth stuck at 185px

setwidth(“100%”) on textfield does not expand to 100% but instead only 185px. If I give it a stylename and add width:100% to the css it does expand. Its nested in 3 levels of layouts.


using firefox 45.4.0 on centos7 with eclipse neon and vaadin 7.7.5

added a textfield with the following command…

username.setWidth(100, Unit.PERCENTAGE);

Used firefox inspector and it shows this…

element {
.qtheme .v-textfield[class*="prompt"]
    color: #a3a3a3;
.v-app input[type="text"]
, .v-app .v-slot > .v-caption, .v-app .v-gridlayout-slot > .v-caption, .v-app .v-has-caption > .v-caption, .v-app .v-formlayout-captioncell > .v-caption, .v-app .v-csslayout > .v-caption {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
.qtheme .v-textfield {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    margin: 0;
    font: inherit;
    font-weight: 400;
    line-height: normal;
    height: 37px;
    border-radius: 4px;
    padding: 4px 9px;
    border: 1px solid #c5c5c5;
    background: white;
    color: #474747;
    -webkit-box-shadow: inset 0 1px 0 #f7f7f7, 0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 #f7f7f7, 0 1px 0 rgba(255, 255, 255, 0.1);
    -webkit-transition: box-shadow 180ms, border 180ms;
    -moz-transition: box-shadow 180ms, border 180ms;
    transition: box-shadow 180ms, border 180ms;
    width: 185px;


Sounds like some outer layout is not set at 100% width. Are you able to post the relevant parts of the Java code?

Here is a test case I built that reproduces the effect. The original is too convoluted.

import com.vaadin.server.ThemeResource;
import com.vaadin.server.ExternalResource;
import com.vaadin.server.Sizeable.Unit;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Image;
import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;

public class widthTest extends VerticalLayout {
    public widthTest(){
        HorizontalLayout hlayout = new HorizontalLayout();
        VerticalLayout vlayout = new VerticalLayout();
        ExternalResource resource = new ExternalResource("https://vaadin.com/documents/10187/10609024/logo-preview/1bf3b738-e0a4-462d-8297-ed5b878eb064?t=1437651427698");
        Image logo = new Image(null,resource);
        TextField input = new TextField();
        input.setWidth(100, Unit.PERCENTAGE);
        setComponentAlignment(hlayout, Alignment.MIDDLE_CENTER);