topbar.xhtml | top-menu doesn't work properly

[remy-penchenat]

Hi,

If I replace your top-menu with this version, my top-menu doesn't work properly. I have noticed that the width of the selectOneMenu is not properly display on my pages if I keep the below version. Why?

Code: Select all

 <ul id="top-menu">
                <li>
                    <a class="menulink Animated05"><i class="icon-home"></i> <span>Home</span></a>
                    <ul style="margin-left:-150px;">
                        <li><a href="#"><i class="icon-feather Fs18 Fleft MarRight10"></i> <span class="FontAdamantiumBold"> Dashboard</span></a></li>
                    </ul>
                </li>
                <li>
                    <a class="menulink Animated05"><i class="icon-info"></i> <span>Help</span></a>
                    <ul style="margin-left:-140px;">
                        <li><a href="#"><i class="icon-question-mark Fs18 Fleft MarRight10"></i> <span class="FontAdamantiumBold"> Support</span></a></li>
                    </ul>
                </li>
                <li>
                    <a class="menulink Animated05"><i class="icon-user"></i> <span>Profile</span></a>
                    <ul style="margin-left:-135px;">
                        <li><a href="#"><i class="icon-users Fs18 Fleft MarRight10"></i> <span class="FontAdamantiumBold"> Accounts</span></a></li>
                    </ul>
                </li>
                <li>
                    <a class="menulink Animated05"><i class="icon-settings"></i> <span>Settings</span></a>
                    <ul style="margin-left:-155px;">
                        <li><a href="#"><i class="icon-wrench Fs18 Fleft MarRight10"></i> <span class="FontAdamantiumBold"> Administrator</span></a></li>
                    </ul>
                </li>
                <li>
                    <a class="menulink Animated05"><i class="icon-out"></i> <span>Log Out</span></a>
                    <ul style="margin-left:-145px;">
                        <li><a href="#"><i class="icon-lock-stroke Fs18 Fleft MarRight10"></i> <span class="FontAdamantiumBold"> Log Out System</span></a></li>
                    </ul>
                </li>
            </ul>

Thanks

[mert.sincan]

I couldn't replicate the issue. Can you please attach a screenshot? And What PF-version and browser are you using?

[remy-penchenat]

Hi,

Please, have a look at the screenshot below:

https://www.dropbox.com/s/mbfzpmikqnmp3 ... M.png?dl=0

As you can see, the selectOneMenu are not displayed correctly after clicking on the menuButton on the left upper side.

I'm running my tests against PF 5.2 and Safari (Google Chrome).

For my use case, I'd like to use your menu as you do, but I need on the right side a p:splitButton. Could you please tell me if the code below is correct or propose me a better one.

Code: Select all

    <div id="layout-topbar">
        <h:form>
            <a id="menu-button" class="Animated1">
                <span id="menuline1" class="Animated05"></span>
                <span id="menuline2" class="Animated05"></span>
                <span id="menuline3" class="Animated05"></span>
            </a>
            <h:graphicImage name="logo.png" library="images" id="logo"/>

            <div id="vedrax-menu">
                <p:splitButton value="#{authenticationController.user.fullName}" icon="fa fa-slideshare">
                    <p:menuitem value=" Dashboard" icon="fa fa-home" outcome="/secure/index"/>
                    <p:separator />
                    <p:menuitem value=" #{msg['action.admin']}" icon="fa fa-gear" outcome="/secure/document/document"/>
                    <p:menuitem value=" #{msg['action.logout']}" action="#{authenticationController.logout()}" icon="fa fa-power-off"/>    
                </p:splitButton> 
            </div>
        </h:form>
    </div>

Thanks

[mert.sincan]

For my use case, I'd like to use your menu as you do, but I need on the right side a p:splitButton. Could you please tell me if the code below is correct or propose me a better one.

If you want to use p:splitButton in topbar.xhtml, please try with;

Code: Select all

 <!-- TOPBAR START -->
    <div id="layout-topbar">

        <a id="menu-button" class="Animated1">
            <span id="menuline1" class="Animated05"></span>
            <span id="menuline2" class="Animated05"></span>
            <span id="menuline3" class="Animated05"></span>
        </a>
        <a href="/adamantium/dashboard.xhtml"><h:graphicImage name="images/logo.svg" id="logo" library="adamantium-layout" /></a>
        <div id="vedrax-menu" class="Fright" style="margin: 20px 10px 0px 0px;">
            <h:form>
                <p:splitButton value="Welcome, Jack Edwin" icon="fa fa-slideshare" appendTo="@this">
                    <p:menuitem value="My Settings" icon="fa fa-cogs" />
                    <p:menuitem value="Uploaded Codes" icon="fa fa-cloud-upload" />
                    <p:menuitem value="Download Codes" icon="fa fa-cloud-download" />
                </p:splitButton> 
            </h:form>
        </div>
    </div>
    <!-- TOPBAR END -->

And add this css;

Code: Select all

.ui-splitbutton .ui-menu .ui-menuitem.ui-state-hover{background-color:transparent !important;}

You need to use appendTo="@this" on splitButton. Please open panel of splitbutton, then scroll browser. You can see error. So, please use my css and appendTo="@this". We will add my css in next release.

[mert.sincan]

the selectOneMenu are not displayed correctly after clicking on the menuButton on the left upper side.

Can you please try with FF and Chrome? I tested with Chrome and FF, but I didn't see this bug. I will try with Safari.

[mert.sincan]

on Safari, please try with;

Code: Select all

.ui-selectonemenu {
    -webkit-transition: none !important; 
    -moz-transition: none !important; 
    -ms-transition: none !important; 
    -o-transition: none !important; 
    transition: none !important;
}

[remy-penchenat]

After adding this to css the selectOneMenu works correctly on Safari

[mert.sincan]

Glad to hear, thanks;) After you make your application, Could you please share a screenshot of the application for other PF-users and us on Facebook? (https://www.facebook.com/groups/primefaces/) We are very curious about Layouts .

[mert.sincan]

Added my fix for next Layouts releases. Issue; https://github.com/primefaces/layouts/issues/45