How manage styles in Vaadin portlet in Liferay

Question

I have a Portlet, where is used Valo theme. Most graphical components are displayed properly, but TextField not. It should have rounded border radius and height should be about 35px. It has normally about 15px and the field is angular. When I narrow width of browser window to about 200px suddenly TextField has proper height. I can explicitly change the height to use method ...setHeight in source code, but how can manage it using styles? I copied tests-valo theme into VAADIN/themes, but still I don't know how to change appearance of text field. It looks like that there is no response. Even very simple change of color has effect on the other components, but not on TextField. I.e.

((ComboBox) testComb).addStyleName("color2");

Has effect.

((TextField) testField).addStyleName("color2");

Has no effect.

The retyping in examples is obsolete and it is used for clarity.

Answer 1

I found solution, which is not perfect, but still enough for my purposes:

1.Copy Valo Theme from vaadin-themes-7.0.5..jar as explained in http://www.rapidpm.org/2014/05/25/vaadin-valo--the-new-theme-%28since-vers.html 2. Edit styles.css in valo root theme. 3. Add !important clause into .valo .v-textfield {..} class definition as written on http://www.liferay.com/community/forums/-/message_boards/message/15001322 for border-radius and height. It changes precedence of appearance.

I.e.

    .valo .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 !important;
    border-radius: 4px !important;
    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;
}

That's all. The appearance is as desired.