scrollbar in sidemenu

Post Reply
j2system
Posts: 7
Joined: 27 Feb 2015, 16:04

02 Dec 2018, 15:59

How to put a scrollbar in sidemenu?

User avatar
aragorn
Posts: 3283
Joined: 29 Jun 2013, 12:38

03 Dec 2018, 09:11

Which sidemenu? do you mean left menu(navigation-menu or tab menu)? They use nanoScroll API.

j2system
Posts: 7
Joined: 27 Feb 2015, 16:04

03 Dec 2018, 13:16

Is the Left menu(navigation-menu)? How to use nanoScroll API?

User avatar
aragorn
Posts: 3283
Joined: 29 Jun 2013, 12:38

03 Dec 2018, 15:24

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,

j2system
Posts: 7
Joined: 27 Feb 2015, 16:04

04 Dec 2018, 14:14

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="&#xE873;" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="&#xE875;" 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="&#xE873;" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="&#xE875;" 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="&#xE873;" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="&#xE875;" 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="&#xE873;" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="&#xE875;" 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="&#xE873;" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="&#xE875;" 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="&#xE873;" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="&#xE875;" 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="&#xE873;" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="&#xE875;" 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="&#xE873;" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="&#xE875;" 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="&#xE873;" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="&#xE875;" 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="&#xE873;" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="&#xE875;" 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="&#xE873;" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="&#xE875;" 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="&#xE873;" outcome="/pages/privado/index"/>
<p:menuitem value="Listagem" icon="&#xE875;" outcome="/pages/privado/index"/>
</pa:menu>
</h:form>
</pa:tab>
</pa:tabMenu>
</div>

User avatar
aragorn
Posts: 3283
Joined: 29 Jun 2013, 12:38

05 Dec 2018, 14:49

Please see my above comment;
When you use pa:menu, we add <div class="nano"> to DOM on Renderer. Then, we're activating it using JS.
(For only pa:menu)

I think you want to add scrollbar for pa:tab components. If yes, please see;
viewtopic.php?f=53&t=51233

Post Reply

Return to “Barcelona - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest