CODEWITHSUNDEEP
cssvaadin
Amira
Amira

Reputation: 3270

Splitting an area to 2 equal columns in using css with Vaadin CssLayout

I need to split a CssLayout line to 2 equal area, the first one will contain a textArea, the second one a table.

So i used this code :

@Override
        protected String getCss(Component c) {
            if (c instanceof TextArea) {
                return "width: 50%; float:left";
            }
            if (c instanceof Table) {
                return "width: 50%; float:right";
            }
            return null;
        }

The result is not compatible with what i want to get, see pictures below (Sorry I was obliged to delete the displayed texts)

Current result

Aimed result:

the wanted result

So how to do it with css.

Setting the height values: 

 @Override
        protected String getCss(Component c) {
           if (c instanceof EsolifeTextAreaWordingLanguage) {
                return "height: 213px";
            }
            if (c instanceof Table) {
                return "height: 219px;padding-left: 8px"; 
            }
            return null;
        }

Upvotes: 0

Views: 83

Answers (1)

Dragan Radevic
Dragan Radevic

Reputation: 801

You need to ensure that css layout has 100% width.

Then you must set text area and table width with setWidth(50, Unit.PERCENTAGE) method, but not with css code.

But If you want to set width with css then on text area and table call setSizeUndefined() method.

Upvotes: 2

Related Questions