为什么咆哮消息不使用通用布局使屏幕左侧变苍白 [英] why growl message not dispalying left side of screen using common layout
问题描述
在我的项目中，有一个要求，当我们将语言从英语更改为阿拉伯语时，所有布局都必须在从右到左的位置显示. 当我不使用通用布局时，咆哮消息运行正常，但是当我在页面的通用布局中添加此内容时，它仍然仅显示右侧.
In my project there is a requirement that when we change language from Engish to Arabic all layout will be displayed in right to left position. growl message working fine when i didn't use common layout but when i add this thing in common layout of my page then its still showing right side only..
源代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Facelet Title</title>
<style type="text/css">
.ui-growl{
#{msg['msg']}:20px;
}
</style>
</h:head>
<body>
<ui:composition template="/home/template/common1/commonLayout.xhtml">
<ui:define name="content">
<h:form id="myform">
<p:growl id="msgs" sticky="true" autoUpdate="true" />
<f:event listener="#{localeControllerBean.islang}" type="preRenderView" />
<p:outputLabel for="sname" value="#{msg['welcome.jsf']}"
styleClass="label" />
<p:inputText id="sname" value="#{sponsorBean.sponsor_name}"
required="true" requiredMessage="#{msg['welcome.jsf']}"
styleClass="input" />
<p:commandButton id="submit" value="Save" ajax="false"
action="#{sponsorBean.save}" style="margin-bottom:50px;"
update="msgs" />
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
推荐答案
在构建视图期间，外部 <ui:composition>的任何内容都被忽略.
Anything outside <ui:composition> is ignored during building the view.
在您的commonLayout.xhtml主模板中，您应该在<h:head>内添加一个新的<ui:insert>:
In your commonLayout.xhtml master template you should add a new <ui:insert> inside <h:head>:
<h:head>
...
<ui:insert name="head" />
</h:head>
然后在模板客户端的<ui:composition>中定义它:
Then define it inside the <ui:composition> of your template client:
<ui:composition template="...">
<ui:define name="head">
<style>.ui-growl{ #{msg['msg']}: 20px; }</style>
</ui:define>
<ui:define name="content">
...
</ui:define>
</ui:composition>
(顺便说一句，#{msg['msg']}绝对不是自我记录；我自己也想使用<html dir="#{direction}">，这样您就可以使用例如html[dir='rtl'] .ui.growl选择器)
(by the way #{msg['msg']} is absolutely not self-documenting; I'd myself also rather have used <html dir="#{direction}"> so that you can just use e.g. html[dir='rtl'] .ui.growl selector)
这篇关于为什么咆哮消息不使用通用布局使屏幕左侧变苍白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
