scrollbar in sidemenu
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Which sidemenu? do you mean left menu(navigation-menu or tab menu)? They use nanoScroll API.
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please see nano scroll codes in DOM and layout.js. When you use pa:menu, we add <div class="nano"> to DOM on Renderer. Then, we're activating it using JS. You can try it by reducing the height of the browser. Please check in live demo.
Best Regards,
Best Regards,
Github Profile: https://github.com/mertsincan
I tried to use it that way, but it did not work. Below is the code.
<div class="layout-sidebar">
<pa:tabMenu class="nano">
<pa:tab icon="people" title="Registro de Empregado">
<h:form id="menu-registro-empregado">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/registroEmpregados/list"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="fa fa-user-times" title="Rescisão Contratual">
<h:form id="menu-rescisao-contratual">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="fa fa-plane" title="Férias Anuais">
<h:form id="menu-ferias-anuais">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="fa fa-user-md" title="Afastamentos">
<h:form id="menu-afastamentos">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="fa fa-money" title="Alteração Salarial">
<h:form id="menu-alteracao-salarial">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="fa fa-user-plus" title="Alteração de Função">
<h:form id="menu-alteracao-funcao">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="fa fa-calculator" title="Recálculo de Guias">
<h:form id="menu-recalculo-guias">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="fa fa-qrcode" title="GPS Retenção INSS">
<h:form id="menu-gps-retencao-inss">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="fa fa-address-book" title="Recibo Pgto Autônomo">
<h:form id="menu-recibo-pgto-autonomo">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="fa fa-ambulance" title="Acidente de Trabalho">
<h:form id="menu-acidente-trabalho">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="fa fa-edit" title="DISO">
<h:form id="menu-diso">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="event" title="Parcelamento">
<h:form id="menu-parcelamento">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
</pa:tabMenu>
</div>
<div class="layout-sidebar">
<pa:tabMenu class="nano">
<pa:tab icon="people" title="Registro de Empregado">
<h:form id="menu-registro-empregado">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/registroEmpregados/list"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="fa fa-user-times" title="Rescisão Contratual">
<h:form id="menu-rescisao-contratual">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="fa fa-plane" title="Férias Anuais">
<h:form id="menu-ferias-anuais">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="fa fa-user-md" title="Afastamentos">
<h:form id="menu-afastamentos">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="fa fa-money" title="Alteração Salarial">
<h:form id="menu-alteracao-salarial">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="fa fa-user-plus" title="Alteração de Função">
<h:form id="menu-alteracao-funcao">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="fa fa-calculator" title="Recálculo de Guias">
<h:form id="menu-recalculo-guias">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="fa fa-qrcode" title="GPS Retenção INSS">
<h:form id="menu-gps-retencao-inss">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="fa fa-address-book" title="Recibo Pgto Autônomo">
<h:form id="menu-recibo-pgto-autonomo">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="fa fa-ambulance" title="Acidente de Trabalho">
<h:form id="menu-acidente-trabalho">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="fa fa-edit" title="DISO">
<h:form id="menu-diso">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="event" title="Parcelamento">
<h:form id="menu-parcelamento">
<pa:menu widgetVar="me">
<p:menuitem value="Cadastro" icon="" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
</pa:tabMenu>
</div>
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please see my above comment;
I think you want to add scrollbar for pa:tab components. If yes, please see;
viewtopic.php?f=53&t=51233
(For only pa:menu)When you use pa:menu, we add <div class="nano"> to DOM on Renderer. Then, we're activating it using JS.
I think you want to add scrollbar for pa:tab components. If yes, please see;
viewtopic.php?f=53&t=51233
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 19 guests