JarekToro / responsive-layout

The layout to beat them all!
https://vaadin.com/directory#!addon/responsive-layout
57 stars 24 forks source link

Text field in a column is not wrapping. #27

Closed eernimurthy closed 7 years ago

eernimurthy commented 7 years ago

In your ColumnTest.java Example, try to put a long column name for a text box. It wont wrap automatically. It will cut the text box name. Do we have any quick fix for this?

JarekToro commented 7 years ago

If your talking about a Label, I believe either setting the width to 100% should work

eernimurthy commented 7 years ago

I set the width of the text field, still its the same issue. Here is the code.

If I am removing style "green" textField" label overlapping second column. if I keep it it is truncating the text box label.

    for (int x = 0; x < 12; x++){
        ResponsiveColumn responsiveColumn = firstRow.addColumn().withDisplayRules(1, 1, 1, 1);//.withComponent(fullWidth(new TextField("colrrrrrrrrrrrrrrrrrrrrrAAAAAA"+(x+1)))).addStyleName("green");
        responsiveColumn.setWidth("100%");
        responsiveColumn.addStyleName("green");
        responsiveColumn.setComponent(fullWidth(new TextField("colrrrrrrrrrrrrrrrrrrrrrAAAAAA"+(x+1))));

    }

public Component fullWidth(Component component) {
    component.setWidth("100%");
    component.setHeight("100%");
    return component;
}

issue

JarekToro commented 7 years ago

Oh ok, thank you for the code, really clears things up. So the caption of the text field is what is not wrapping. I believe this is standard for all captions by all layouts as it's using cssLayout to render the captions.

What you would need todo is add something like

'''CSS .v-caption{ white-space:wrap; } '''

Add that to your theme scss and compile it should work.