Question

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>
    <style type="text/css">
        .ui-menu-child{
            left: -60px; width: 8.5em; // or anything you want
        }
    </style>
<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="bmnu_karkard" 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="test1" 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>

我使用样式来改变.ui-menu-child的位置但不改变show popup panel。

<style type="text/css">
    .ui-menu-child{
        left: -60px; width: 8.5em; // or anything you want
    }
</style>

我试试这个

<style type="text/css">
    bmnu_karkard .ui-menu-child{
        left: -60px; width: 8.5em; // or anything you want
    }
</style>

我使用this方式，但它不起作用。如何更改primefaces子菜单的弹出面板样式？

Answer 1

您可能需要添加!important个样式，试试这个：

<style type="text/css">
   .ui-menubar{       
       float: right !important;           
       margin-left: 0px !important;        
   }
   .ui-menu-list {
       right: 0;
   }
   .ui-menuitem-text {
       float: right !important;
   }
</style>

enter image description here

另见：

How To Override PrimeFaces CSS?

Answer 2

这种风格对于上述问题是正确的：

     <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;
        }

        .ui-menuitem-text {
            float: right !important;
        }
    </style>

将<p：menubar> CSS更改为RTL </p：menubar>

2 个答案: