CODEWITHSUNDEEP
cssjsfprimefaces
A. Shaheen
A. Shaheen

Reputation: 105

PrimeFaces menu items in RTL

I'm trying to develop two language menu for my application, first language is English and second language is Arabic.

No problem with English but when I display menu in Arabic with RTL the menu name is displayed successfully, however all submenu items are displayed in LTR.

<h:form
        dir="#{session.getAttribute('user').locale=='en-US'?'ltr':'rtl'}">
        <p:panelMenu style="width:90%;"   >
            <p:submenu label="#{msg.ControlPanelMenu}"  
                rendered="#{userAuthneticator.authenticated}">
                <p:menuitem value="#{msg.AdministrationMenu}"    
                    action="/admin/index.xhtml" rendered="#{user.type==1}"
                    ajax="false" />
                <p:menuitem value="#{msg.TodayActivities}"
                    action="#{userActivity.prepareView()}" ajax="false" />
                <p:menuitem value="#{msg.ChangePasswordMenu}"
                    action="#{userUtils.prepareView()}" ajax="false" />
                <p:menuitem value="#{msg.ChangeLang}"
                    action="#{userUtils.changeLanguage()}" ajax="false" />
                <p:menuitem value="#{msg.LogoutMenu}"
                    action="#{userAuthneticator.logout()}" ajax="false"
                    onclick="if (!confirm('#{msg.ConfirmLogout}'))
                                return false" />
            </p:submenu>

This is the display of the menu in RTL:

enter image description here

How can I make the menu items displayed in RTL correctly ?

Thanks.

Upvotes: 0

Views: 1228

Answers (1)

Mehmet
Mehmet

Reputation: 361

You can add the following code to your page. you need to do it manually by manipulating css. 

<p:outputPanel rendered="#{session.getAttribute('user').locale!='en-US'}">
    <style>
        .ui-panelmenu .ui-menuitem-text,.ui-panelmenu .ui-menuitem-text {
            float: right !important;
        }
    </style>
</p:outputPanel>

Upvotes: 2

Related Questions