Question

我使用primefaces来创建子菜单，但是子菜单的弹出式面板超出了角落的浏览器（不同于x /左侧位置）。

我的出局： 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>

但不行。并在show popup菜单面板中显示allways错误。

我的回答如何通过页面中的更改样式或在xhtml页面中加载css来更改面板中的这个位置。

Answer 1

只有样式必须在标签中写入。更改代码后，工作正常。

<?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>

Answer 2

尝试使用'inherit'更改宽度值。也许它会起作用。你也可以在jsfiddle上粘贴你的代码。因此编辑和调试很容易。

更改Primefaces样式表

2 个答案: