如何在Liferay中管理Vaadin portlet中的样式

时间:2015-06-18 10:52:56

标签: css3 liferay vaadin portlet

我有一个Portlet,其中使用了Valo主题。大多数图形组件都正确显示,但TextField没有。它应该具有圆形边界半径,高度应该是大约35px。它通常大约15px,场是有角的。 当我将浏览器窗口的宽度缩小到大约200px时,TextField会有适当的高度。 我可以在源代码中明确更改高度以使用方法... setHeight,但如何使用样式管理它? 我将tests-valo主题复制到了VAADIN / themes中,但我仍然不知道如何更改文本字段的外观。看起来似乎没有回应。 即使非常简单的颜色更改也会影响其他组件,但不会影响TextField。 即。

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

有效果。

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

无效。

示例中的重新输入已经过时,用于清晰起见。

1 个答案:

答案 0 :(得分:1)

我找到了解决方案,但并不完美,但仍然足以达到我的目的:

1.按照http://www.rapidpm.org/2014/05/25/vaadin-valo--the-new-theme-%28since-vers.html上的解释,从vadin-themes-7.0.5..jar复制Valo主题  2.在valo根主题中编辑styles.css。  3.将!important子句添加到.valo .v-textfield {..}类定义中,如http://www.liferay.com/community/forums/-/message_boards/message/15001322所示,用于border-radius和height。它改变了外观的优先级。

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

这就是全部。外观符合要求。