2013-12-23 123 views
0

我使用primefaces创建子菜单,但子菜单的弹出面板超出了角度od浏览器(不是相同的x /左侧位置)。更改Primefaces样式表

我出来就把: enter image description here

和Firebug的控制台是这样的,如果更改和两个标签解决我的问题。

enter image description here

我的代码:

<?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来改变面板的位置。

+0

你为什么混合HTML和XHTML代码。看看primefaces的例子,并尝试关注它们。 – Makky

+0

哪一行?我只为这个组合添加样式。 – Jeus

+1

例如。你需要添加jsf 标签 – Makky

回答

-2

尝试更改宽度的值与'继承'..也许它会工作。 你也可以将你的代码粘贴到jsfiddle上。所以编辑和调试会很容易。

+1

这是JSF代码和JS小提琴不支持。 – Makky

+0

任何样式标记不起作用。这使我困惑。 – Jeus

0

只有样式才能在标签中写入。改变代码后,这是行之有效的。

<?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"> 
<h:head> 
<title>IGNORED</title> 
<f:facet name=""> 
<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> 
</f:facet> 
</h:head> 

<h: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>