Css 如何设置primefaces的layoutUnit中的高度?
我用的是PrimeFaces5.0。下面是我的页面,我想将布局单元西面和中央的高度固定设置为200px。有没有可能这样做?当前高度将被忽略Css 如何设置primefaces的layoutUnit中的高度?,css,layout,primefaces,height,Css,Layout,Primefaces,Height,我用的是PrimeFaces5.0。下面是我的页面,我想将布局单元西面和中央的高度固定设置为200px。有没有可能这样做?当前高度将被忽略 <?xml version="1.0" encoding="UTF-8"?> <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/co
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" template="/templates/template.xhtml">
<ui:define name="header_title">
<h:outputText value="Titel" align="center" />
</ui:define>
<ui:define name="content">
<h:form id="labelForm" style="height:100%">
<p:growl id="growl" showDetail="true" />
<p:layout style="height:100%" fullPage="false" >
<p:layoutUnit position="west" header="west" resizable="false" closable="false" collapsible="false" style="height:200px">
<p:tieredMenu id="type" model="#{dynamicLabelMenu.menu}" trigger="itemSelect" />
</p:layoutUnit>
<p:layoutUnit position="center" resizable="false" closable="false" collapsible="false" header="center" style="height:200px">
<!-- datatable -->
</p:layoutUnit>
<p:layoutUnit position="south" size="100" header="Bottom" resizable="false" closable="false" collapsible="false">
<br/>
<br/>
<!-- datatable -->
</p:layoutUnit>
</p:layout>
</h:form>
</ui:define>
</ui:composition>
高度应与其他单位一致。。。也就是说,如果你想固定一个单位的高度,其他单位也必须固定
这背后的原因是PrimeFaces将css规则嵌入到style属性中,并完全忽略您的样式
您有两个选项来解决此问题:
- 如果您可以保持单元之间的一致性,那么这可能会有所帮助。目前,您的布局高度为100%,这意味着单元应适合内容,但要解决此问题,您可以采用这种方法
<p:layout style="min-height:200px;">
.ui-dialog .ui-dialog-title {
text-align : center;
}
您的CSS:
#content .ui-dialog .ui-dialog-title {
text-align : right;
}
您可以使用浏览器调试工具(大多数浏览器中为F12)查找组件是否使用了css。使用您自己的CSS代码中更具体的CSS选择器覆盖它们。感谢您的快速响应。我更喜欢第二种选择。
#content .ui-dialog .ui-dialog-title {
text-align : right;
}