metroui breaks panelmenu [SOLVED]

[chrishj]

If I have metroui then the icons for the submenu and menu items are rendered in the middle of the text.

top part of menu.

Code: Select all

<p:panelMenu style="width: 300px;"  >
    <p:submenu label="#{menuText.mL1_Cfg_Default}" icon="ui-folder-open "  >
     <p:menuitem value="#{menuText.mi_def_load}"  action="defaultConfig" icon="fa fa-gear"
                ajax="false"/>
    </p:submenu>

If remove the metroui theme then the icons are in the correct place to the left of the text.

web.xml

Code: Select all

<context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>metroui</param-value>
    </context-param>

Thank you,

[mert.sincan]

Please try with;

Code: Select all

        <style type="text/css">
            .ui-panelmenu .ui-panelmenu-content.ui-widget-content .ui-menuitem-icon {
                margin: auto 0 !important;
            }
            
            .ui-panelmenu .ui-panelmenu-content.ui-widget-content .ui-menuitem-link {
                padding: 0.3em 0.3em 0.3em 2em !important;
                box-sizing: border-box;
            }
            .ui-panelmenu .ui-panelmenu-content.ui-widget-content .ui-menuitem-text {
                margin-left: 0px;
            }
            
            .ui-panelmenu .ui-menu-parent > .ui-menuitem-link > .ui-menuitem-text {
                margin-left: 10px;
            }
        </style>

Screenshot;

[chrishj]

Thank you very much.

Your solutions works a treat.

[mert.sincan]

Glad to hear, thanks