How manage styles in Vaadin portlet (for Liferay)

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.

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

Vaadin themes in Liferay are challenging at times because the Vaadin themes normally assume they are starting from an unstyled state but in Liferay the Liferay theme is in place and the Vaadin theme doesn’t always undo the styling applied from the Liferay theme.

Usually you have inspect the element in the browser and determine what styling is applied. You’ll probably find something from the Liferay theme bleeding through to the element. Add specific styling to your own Vaadin theme to override what the Liferay theme was doing.

Thank you for explanation. I will focus on Liferay.

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

  1. Do copy Valo Theme from vadin-themes-7.0.5…jar as explained on
    http://www.rapidpm.org/2014/05/25/vaadin-valo–the-new-theme-(since-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.

[code]
.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;

}
[/code]That’s all. The appearance is as desired.

Basically wrong.

First you never want to change a Vaadin theme because, as you update Vaadin, you risk losing your changes.

Instead you should create your own theme that inherits from Valo and add your overrides in there. The rapidpm blog you point at tells you how to create your own theme that inherits from Valo, so there’s no instructions there telling you to edit Valo’s styles.scss file.

Second, if your issue is specificity, then you solve the problem by increasing the specificity of entity so your rule will match over the Liferay rule.

!important, as a rule, should be totally avoided. It is an ugly hack which should only be used as a last resort because of the way it interferes with generic CSS rule handling.

The better option, the one most likely to work going forward and be resilient to Vaadin upgrades, is to create a theme that inherits from Valo. In your custom theme you add a class rule for “.valo .v-textfield.my-height-fix” which has the height & border radius you want. Then you add this “my-height-fix” class to your elements.

The additional class assignment will raise the specificity and match your rule vs any other.

Hello Dave,

  • I did copy of Vaadin theme to my project, I only risk, that my project will use older version. Additionally, I am aware that, when !important rule occurs in style which will be in conflict with my rule, than I can again loose my appearance.
  • Your solution is more specific, I must call addStyleName method for each component which I can change.
  • If you look onto Valo theme - styles.css this “ugly hack”
    !important
    rule is very often used there, I think, it is simly a rule as another one. :slight_smile:

Of couse, the most beatiful solution will be to find out place in Liferaray, which changing default appearance and overwrite it.