0

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.

Tiny
  • 27,221
  • 105
  • 339
  • 599
A. Shaheen
  • 105
  • 13

1 Answers1

2

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>
Mehmet
  • 341
  • 2
  • 7
  • 1
    using `!important` is a [bad practice](http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css), use inheritance as it should be, replace your selector with this one `span.ui-menuitem-text` to avoid using that keyword. – Hatem Alimam Jul 07 '14 at 07:20