Page 1 of 1

Ultima Static Menu Expands Only Once

Posted: 09 May 2019, 13:54
by myaspm
Hi,

I'm trying to use static menu layout but there's an interesting bug about it.

This is the layout wrapper code:

Code: Select all

<div class="layout-wrapper menu-layout-static">
Page opens up with menu expanded, i can close it only once, after that it won't expand again.

Layout wrapper code when i close it:

Code: Select all

layout-wrapper menu-layout-static menu-layout-overlay layout-menu-static-inactive
Layout wrapper code when i try to open it again:

Code: Select all

layout-wrapper menu-layout-static menu-layout-overlay layout-menu-static-inactive layout-menu-overlay-active
Somehow menu-layout-overlay finds its way into the layout wrapper div. I couln't find anything about this so any help is appreciated. Thanks in advance.

Re: Ultima Static Menu Expands Only Once

Posted: 14 May 2019, 09:18
by mert.sincan
Could you please attach your template.xhtml and menu.xhtml files? Also, Could you please try this issue with our sample project? and Do you update the menu component or the parent of it with ajax?

Best Regards,

Re: Ultima Static Menu Expands Only Once

Posted: 14 May 2019, 15:01
by myaspm
template.xhtml:

Code: Select all

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

<h:head>
    <f:facet name="first">
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="theme-color" content="indigo"/>
    </f:facet>
    <title>Sample Title</title>


    <h:outputScript name="js/nanoscroller.js" library="ultima-layout"/>
    <h:outputScript name="js/layout.js" library="ultima-layout"/>
    <h:outputScript name="js/ripple.js" library="ultima-layout"/>
    <h:outputScript name="js/swipe.js" library="ultima-layout"/>

    <ui:insert name="head"/>
</h:head>
<f:view locale="#{languageBean.locale}">
<h:body styleClass="main-body layout-compact">
    <p:growl id="msg" showDetail="true" life="2000" severity="info, error"/>
    <div class="layout-wrapper menu-layout-static">
        <ui:include src="./topbar.xhtml"/>
        <ui:include src="./menu.xhtml"/>

        <div class="layout-main">
            <ui:insert name="pageContent"/>
        </div>
    </div>

    <h:outputStylesheet name="css/nanoscroller.css" library="ultima-layout"/>
    <h:outputStylesheet name="css/animate.css" library="ultima-layout"/>
    <h:outputStylesheet name="css/ripple.css" library="ultima-layout"/>
    <h:outputStylesheet name="css/layout-indigo.css" library="ultima-layout"/>
    <h:outputStylesheet name="css/style.css" library="ultima-layout"/>


</h:body>
</f:view>

</html>
menu.xhtml

Code: Select all

<ui:composition
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pu="http://primefaces.org/ultima">

    <link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/ultima-layout/css/layout-indigo.css"/>

    <h:outputScript name="js/nanoscroller.js" library="ultima-layout"/>
    <h:outputScript name="js/layout.js" library="ultima-layout"/>
    <h:outputScript name="js/ripple.js" library="ultima-layout"/>
    <h:outputScript name="js/swipe.js" library="ultima-layout"/>

    <h:outputStylesheet name="css/nanoscroller.css" library="ultima-layout"/>
    <h:outputStylesheet name="css/animate.css" library="ultima-layout"/>
    <h:outputStylesheet name="css/ripple.css" library="ultima-layout"/>
    <h:outputStylesheet name="css/grid.css" library="ultima-layout"/>

    <h:form id="menuform">
        <div class="layout-menu">
            <div class="nano has-scrollbar">
                <div class="nano-content menu-scroll-content">

                    <pu:menu widgetVar="me" rendered="#{sessionController.isPasswordChanged()}">

                    </pu:menu>

                </div>
            </div>
        </div>
    </h:form>
</ui:composition>
No ajax call or anything like that neither in template nor topbar.xhtml.

Re: Ultima Static Menu Expands Only Once

Posted: 16 May 2019, 08:59
by mert.sincan
Thanks a lot for the sample code. But, I couldn't replicate it.

Firstly, please remove menu-layout-static or menu-layout-overlay class from wrapper div. You can only choose one of them.
Then, please remove the following imports from menu.xhtml;

Code: Select all

    <link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/ultima-layout/css/layout-indigo.css"/>

    <h:outputScript name="js/nanoscroller.js" library="ultima-layout"/>
    <h:outputScript name="js/layout.js" library="ultima-layout"/>
    <h:outputScript name="js/ripple.js" library="ultima-layout"/>
    <h:outputScript name="js/swipe.js" library="ultima-layout"/>

    <h:outputStylesheet name="css/nanoscroller.css" library="ultima-layout"/>
    <h:outputStylesheet name="css/animate.css" library="ultima-layout"/>
    <h:outputStylesheet name="css/ripple.css" library="ultima-layout"/>
    <h:outputStylesheet name="css/grid.css" library="ultima-layout"/>
The template page already contains these imports.

Best Regards,

Re: Ultima Static Menu Expands Only Once

Posted: 16 May 2019, 10:39
by myaspm
I'm so sorry about taking your time but apparently the developer before me changed layout.js for whatever reason. Restoring it to its original state solves the problem.

Thanks a lot, you can close this thread as solved.

Re: Ultima Static Menu Expands Only Once

Posted: 17 May 2019, 09:37
by mert.sincan
No problem, thanks a lot for the update! You can also make the above changes in menu.xhtml.

Best Regards,