我使用的是primefaces 5.3和primefaces cupertino theme 1.0.10。
我试图移动p:growl消息的位置并改变宽度。我遇到了背景颜色为黄色的问题 没有完全延伸的文字。我一直在尝试一系列的CSS调整,但无法修复它。
以下css移动p:gowl的位置,但黄色背景的宽度不受影响。如何增加黄色背景的宽度?
.ui-growl {
position:fixed;
top: 50%;
left: 17%;
width: 1000px;
height: 110px;
z-index:9999;
}
primefaces css如下
* html .ui-growl {
position: absolute;
}
* html .ui-growl-item {
padding-bottom: 0;
}
* html .ui-growl-icon-close {
top: 7px;
right: 7px;
}
.ui-growl {
position: fixed;
top: 20px;
right: 20px;
width: 301px;
}
.ui-growl-item-container {
position: relative;
margin: 0 0 10px 0;
opacity: 0.85;
filter: alpha(opacity=85);
}
.ui-growl-item {
display: block;
padding: 10px 15px;
}
.ui-growl-item p {
padding: 0;
margin: 0;
}
.ui-growl-icon-close {
position: absolute;
top: 5px;
right: 3px;
cursor: pointer;
}
.ui-growl-title {
font-weight: bold;
padding: 0 0 7px 0;
display: block;
}
.ui-growl-image {
width: 32px;
height: 32px;
float: left;
margin: 0;
padding: 0;
display: block;
background: url("/stonemanInterface2/faces/javax.faces.resource/messages/messages.png?ln=primefaces&v=5.3") no-repeat;
}
.ui-growl-image-info {
background-position: 0 -264px;
}
.ui-growl-image-warn {
background-position: 0 -396px;
}
.ui-growl-image-error {
background-position: 0 0;
}
.ui-growl-image-fatal {
background-position: 0 -132px;
}
.ui-growl-message {
padding: 0 0 5px 0;
width: 220px;
float: right;
}
.ui-growl-message p {
font-weight: normal;
}
答案 0 :(得分:2)
.ui-growl {
position:fixed;
top: 40%;
left: 37%;
width: 360px;
height: 110px;
z-index:9999;
}
答案 1 :(得分:0)
谢谢,是的,经过检查,显然css没有应用。
以下CSS解决了位置和宽度问题
.ui-growl {
position: fixed;
top: 60px;
right: 100px;
width: 800px;
}
.ui-growl-message {
padding: 0 0 5px 0;
width: 95%;
float: left;
}
主要是问题是资源排序问题,通过将样式表放在名为last in the body的facet中来解决
<h:body>
<f:facet name="last">
<h:outputStylesheet library="theme1" name="css/styles/demo.css" />
</f:facet>
中所述