textfield setwidth stuck at 185px

Vaadin 6 / 7 / 8
1

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.

Bug?

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

Hi,

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

3

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(){
        
        setWidth("100%");
        setMargin(true);
        setSpacing(true);
        
        HorizontalLayout hlayout = new HorizontalLayout();
        
        
        
        VerticalLayout vlayout = new VerticalLayout();
        vlayout.setWidth("100%");
        vlayout.setMargin(true);
        vlayout.setSpacing(true);
        
        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);
        //qlogo.setWidth("300px");
        vlayout.addComponent(logo);
        
        TextField input = new TextField();
        input.setWidth(100, Unit.PERCENTAGE);
        vlayout.addComponent(input);
        
        hlayout.addComponent(vlayout);
        
        addComponent(hlayout);
        
        setComponentAlignment(hlayout, Alignment.MIDDLE_CENTER);
    }