Prime Community Forum

How to put a scrollbar in sidemenu?

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

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

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,

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>

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