【发布时间】：2014-01-11 19:58:28
【问题描述】：
我使用 primefaces 创建子菜单，但子菜单的弹出面板不在浏览器的角落（x/left 位置不同）。
我的输出：
firebug 控制台是这样的，如果更改两个标签可以解决我的问题。
我的代码：
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<title>IGNORED</title>
</head>
<body>
<ui:composition>
<h:outputScript name="header.js" library="js" target="head"/>
<p:menubar id="mnubr_main" style="font-size: 75% !important;">
<p:submenu styleClass="submenu" id="sbmnu_karkard" label="#{msg.karkard}" style="float: right;">
<p:menuitem value="#{msg.khodrohaye_sabok}" url="../../../pages/karkard/sabok" style="float: right;"/>
<p:menuitem value="#{msg.khodrohaye_sangin}" url="../../../pages/karkard/sangin" />
<p:menuitem value="تست۱" url="../../../pages/tarefe" />
</p:submenu>
<f:facet name="options" class="ui-float-left" id="haha">
<p:commandButton id="btn_exit" title="#{msg.exit}"
icon="ui-icon-exit" style="float: left; margin-right: 5px;"
actionListener="#{userController.logout}"
oncomplete="handleRedirectRequest(xhr, status, args)"/>
<p:outputLabel value="#{userController.selected.specification.name}" style="margin-top: 5px;"/>
</f:facet>
</p:menubar>
<p:spacer height="20px"/>
</ui:composition>
</body>
</html>
我尝试通过标签更改页面样式
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<title>IGNORED</title>
<style type="text/css">
submenu .ui-menu-child{
left: -60px !important;
width: 8.5em !important;
}
.submenu > ul{
left: -60px !important;
width: 8.5em !important;
}
.ui-widget-content.ui-menu-list.ui-corner-all.ui-helper-clearfix.ui-menu-child.ui-shadow{
left: -60px !important;
width: 8.5em !important;
}
.submenu .ui-menu-child{background: blue !important; }
</style>
</head>
<body>
<ui:composition>
<h:outputScript name="header.js" library="js" target="head"/>
<p:menubar id="mnubr_main" style="font-size: 75% !important;">
<p:submenu styleClass="submenu" id="sbmnu_karkard" label="#{msg.karkard}" style="float: right;">
<p:menuitem value="#{msg.khodrohaye_sabok}" url="../../../pages/karkard/sabok" style="float: right;"/>
<p:menuitem value="#{msg.khodrohaye_sangin}" url="../../../pages/karkard/sangin" />
<p:menuitem value="تست۱" url="../../../pages/tarefe" />
</p:submenu>
<f:facet name="options" class="ui-float-left" id="haha">
<p:commandButton id="btn_exit" title="#{msg.exit}"
icon="ui-icon-exit" style="float: left; margin-right: 5px;"
actionListener="#{userController.logout}"
oncomplete="handleRedirectRequest(xhr, status, args)"/>
<p:outputLabel value="#{userController.selected.specification.name}" style="margin-top: 5px;"/>
</f:facet>
</p:menubar>
<p:spacer height="20px"/>
</ui:composition>
</body>
</html>
但不工作。并在显示弹出菜单面板中显示总是错误。
我的回答如何通过更改页面样式或在 xhtml 页面中加载 css 来更改面板中的此位置。
【问题讨论】：
-
为什么要混合 HTML 和 XHTML 代码。查看 primefaces 示例并尝试遵循它们。
-
哪一行？我只为这个组合添加样式。
-
例如 。您需要添加 jsf 和 标签
-
为帮助您入门，请查看 MyKong mkyong.com/jsf2/jsf-2-0-hello-world-example 提供的基本 JSF 示例
-
修复但css样式不修复:(
标签： html css jsf primefaces