pa:tab pane scroll not appear

Post Reply
fauzifouad
Posts: 5
Joined: 20 Jan 2017, 05:01

07 Jun 2017, 06:07

Hi,

How can I make scroll appear if content of pa:tab pane longer than the pane height without use submenu? Any workaround is appreciated for my tight schedule.

Regards.

aragorn
Posts: 3762
Joined: 29 Jun 2013, 12:38

09 Jun 2017, 08:01

- Please add the following codes into layout.js

Code: Select all

/** 
 * PrimeFaces Barcelona Layout
 */
PrimeFaces.widget.Barcelona = PrimeFaces.widget.BaseWidget.extend({
    
    init: function(cfg) {
        this._super(cfg);
        ...
        
        this.nano = this.jq.closest('.nano');  // please add this line
    	this.nano.nanoScroller({flash:true}); // please add this line
        
        this._bindEvents();
        this._restoreMenuState();
    },
    
 ....
- Add the following css code;

Code: Select all

.nano > .nano-content.menu-scroll-content {
    display: block;
    height: 100%;
    position: relative;
    overflow: scroll;
    overflow-x: hidden;
}
.layout-wrapper .layout-sidebar {
    overflow: auto;
}

.layout-sidebar > .nano .nano-pane .nano-slider {
    background-color: #aaaaaa;
    opacity: 0.3;
    filter: alpha(opacity=30);
}

.layout-sidebar > .nano > .nano-content > .layout-tabmenu > ul {
    padding-bottom: 120px;
}
- please change menu.xhtml

Code: Select all

...

<div class="layout-sidebar">
        <div class="nano">
            <div class="nano-content menu-scroll-content">
                
                <pa:tabMenu>
                      //pa:tab
               </pa:tabMenu>   
            
           </div>
      </div>
</div>
...

fauzifouad
Posts: 5
Joined: 20 Jan 2017, 05:01

13 Jun 2017, 10:54

Thanks for the workaround.

I have applied your solution, but still scroll not appear if contents of tab pane exceed the tab pane height.

layout.js :

Code: Select all

PrimeFaces.widget.Barcelona = PrimeFaces.widget.BaseWidget.extend({
    
    init: function(cfg) {
        this._super(cfg);
        this.wrapper = $(document.body).children('.layout-wrapper');
        this.sidebar = this.wrapper.children('.layout-sidebar');
        this.tabMenu = this.jq;
        this.tabMenuNav = this.tabMenu.children('.layout-tabmenu-nav');
        this.tabMenuNavLinks = this.tabMenuNav.find('a');
        this.tabMenuContents = this.tabMenu.find('.layout-tabmenu-content');
        this.topbar = this.wrapper.children('.topbar');
        this.topbarMenu = this.topbar.children('.topbar-menu');
        this.topbarItems = this.topbarMenu.children('li');
        this.topbarLinks = this.topbarItems.children('a');
        this.topbarMenuButton = $('#topbar-menu-button');        
        this.menuActive = false;
        this.sidebarClick = false;
        this.topbarLinkClick = false;
        this.topbarMenuClick = false;
        
        //workaround from PF for nano scroll
        this.nano = this.jq.closest('.nano');  // please add this line
    	this.nano.nanoScroller({flash:true}); // please add this line

        this._bindEvents();
        this._restoreMenuState();
    },
menu.xhtml:

Code: Select all

<style type="text/css">
        .ui-datagrid-no-border .ui-datagrid-content {
            border: none;
        }
         
        .ui-panelgrid-cell-no-paddig-left .ui-panelgrid-cell {
             padding-left: 0;
        }
        
        .nano > .nano-content.menu-scroll-content {
            display: block;
            height: 100%;
            position: relative;
            overflow: scroll;
            overflow-x: hidden;
        }
        .layout-wrapper .layout-sidebar {
            overflow: auto;
        }

        .layout-sidebar > .nano .nano-pane .nano-slider {
            background-color: #aaaaaa;
            opacity: 0.3;
            filter: alpha(opacity=30);
        }

        .layout-sidebar > .nano > .nano-content > .layout-tabmenu > ul {
            padding-bottom: 120px;
        }
    </style>

Code: Select all

<div class="layout-sidebar #{guestPreferences.darkMenu ? 'layout-sidebar-dark': ''}">
        <div class="nano">
            <div class="nano-content menu-scroll-content">
                <pa:tabMenu>
                    <pa:tab icon="&#xE8EF;" title="Menu">
                        <h:form id="menu-form">
                            <pa:menu widgetVar="me">
                                <p:menuitem id="um_dashboard" value="Dashboard" icon="&#xE871;" outcome="/dashboard"/>
                                <p:menuitem id="um_user" value="User" icon="people" outcome="/user"/>
                                <p:menuitem id="um_prog" value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                                <p:menuitem value="Programme" icon="&#xEb3f;" outcome="/programme"/>
                            </pa:menu>
                        </h:form>
                    </pa:tab>

                    <pa:tab icon="&#xE167;" title="Admin" rendered="#{mb.loggedInUserRole eq 'ROLE_ADMIN'}">
                        <h:form id="menu-admin">
                            <pa:menu widgetVar="meadmin">
                                <p:menuitem id="um_node" value="Node" icon="&#xE335;" outcome="/admin/node"/>
                                <p:menuitem id="um_budget" value="Budget" icon="&#xE227;" outcome="/admin/budget"/>
                                <p:menuitem id="um_kpidesc" value="KPI Description" icon="&#xE896;" outcome="/admin/kpi_description"/>
                                <p:menuitem id="um_carousel" value="Carousel Manager" icon="&#xE432;" outcome="/admin/carousel"/>
                            </pa:menu>
                        </h:form>
                    </pa:tab>

                    <pa:tab icon="inbox" title="Inbox">
                        <h:form id="menu-inbox">
                            <pa:menu widgetVar="meinbox">
                                <p:menuitem id="um_alltask" value="All Tasks" icon="&#xE53B;" outcome="/task"/>                     
                            </pa:menu>

                                <div class="inbox-tab">
                                    <ul>
                                        <p:dataGrid var="taskRecipient" value="#{mb.menuUserTaskRecipientList}" columns="1" layout="grid" styleClass="ui-datagrid-no-border">                                                         
                                            <h:panelGroup layout="block" style="background-color:#d7deea;" rendered="#{!taskRecipient.viewed}">
                                                <li class="clearfix">
                                                    <p:graphicImage name="images/guest.png" library="barcelona-layout" width="30" />
                                                    <h:outputText style="font-weight:bolder" styleClass="name" value="#{taskRecipient.task.fromUser.name}" />
                                                    <h:outputText value="&lt;br/&gt;" escape="false" />
                                                    <p:commandLink value="#{taskRecipient.task.title}" actionListener="#{mb.onViewTask(taskRecipient)}" style="font-weight:bold" styleClass="message" />
                                                </li>
                                            </h:panelGroup>
                                            <h:panelGroup layout="block" rendered="#{taskRecipient.viewed}">
                                                <li class="clearfix">
                                                    <p:graphicImage name="images/guest.png" library="barcelona-layout" width="30" />
                                                    <h:outputText styleClass="name" value="#{taskRecipient.task.fromUser.name}" />
                                                    <h:outputText value="&lt;br/&gt;" escape="false" />
                                                    <p:commandLink value="#{taskRecipient.task.title}" actionListener="#{mb.onViewTask(taskRecipient)}" styleClass="message" />
                                                </li>                                           
                                            </h:panelGroup>
                                        </p:dataGrid>
                                    </ul>
                                </div>                  

                            <div class="inbox-tab">
                                <div class="inbox-labels">
                                    <span>Labels</span>
                                    <ul>
                                        <li class="clearfix">
                                            <span class="inbox-label">New Task</span>
                                            <span class="inbox-label-badge">#{mb.unviewTask}</span>
                                        </li>
                                        <li class="clearfix">
                                            <span class="inbox-label">New Message</span>
                                            <span class="inbox-label-badge">#{mb.unviewMsg}</span>
                                        </li>
                                        <li class="clearfix">
                                            <span class="inbox-label">Total New</span>
                                            <span class="inbox-label-badge">#{mb.unviewTask + mb.unviewMsg}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </h:form>  
                    </pa:tab>

                    <pa:tab icon="&#xE85C;" title="Report" rendered="#{mb.loggedInUserRole eq 'ROLE_ADMIN'}">
                        <pa:menu widgetVar="mereport">
                            <p:menuitem id="um_report" value="Report" icon="&#xE85D;" outcome="/admin/report"/>
                        </pa:menu>
                    </pa:tab>
                </pa:tabMenu>
            </div>
        </div>   
    </div>
Regards.

aragorn
Posts: 3762
Joined: 29 Jun 2013, 12:38

13 Jun 2017, 13:40

Please add the following css into <h:head> in template.xhtml

Code: Select all

<style type="text/css">
.nano > .nano-content.menu-scroll-content {
    display: block;
    height: 100%;
    position: relative;
    overflow: scroll;
    overflow-x: hidden;
}
.layout-wrapper .layout-sidebar {
    overflow: auto;
}

.layout-sidebar > .nano .nano-pane .nano-slider {
    background-color: #aaaaaa;
    opacity: 0.3;
    filter: alpha(opacity=30);
}

.layout-sidebar > .nano > .nano-content > .layout-tabmenu > ul {
    padding-bottom: 120px;
}

fauzifouad
Posts: 5
Joined: 20 Jan 2017, 05:01

14 Jun 2017, 05:46

I have tried to move the css into <h:head> in template.xhtml but still no luck..the nano scroller still not appear..it only appear after browser view become shorter..e.g. when inspect html code on google chrome(bottom console).

template.xhtml:

Code: Select all

<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" />
        </f:facet>
        <title><ui:insert name="title">Smeipa Online</ui:insert></title>
        <h:outputScript name="js/nanoscroller.js" library="barcelona-layout" />
        <h:outputScript name="js/layout.js" library="barcelona-layout" />
        <h:outputScript name="js/ripple.js" library="barcelona-layout" />
        <ui:insert name="head"/>
        <style type="text/css">
            .nano > .nano-content.menu-scroll-content {
                display: block;
                height: 100%;
                position: relative;
                overflow: scroll;
                overflow-x: hidden;
            }
            
            .layout-wrapper .layout-sidebar {
                overflow: auto;
            }

            .layout-sidebar > .nano .nano-pane .nano-slider {
                background-color: #aaaaaa;
                opacity: 0.3;
                filter: alpha(opacity=30);
            }

            .layout-sidebar > .nano > .nano-content > .layout-tabmenu > ul {
                padding-bottom: 120px;
            }
        </style>
    </h:head>

aragorn
Posts: 3762
Joined: 29 Jun 2013, 12:38

15 Jun 2017, 08:45

Please try the following codes;
in template.xhtml

Code: Select all

//CSS
<style type="text/css">
.nano > .nano-content.menu-scroll-content {
    display: block;
    height: 100%;
    position: relative;
    overflow: scroll;
    overflow-x: hidden;
}
.layout-wrapper .layout-sidebar {
    overflow: auto;
}

.layout-sidebar .layout-tabmenu > .nano .nano-pane .nano-slider {
    background-color: #aaaaaa;
    opacity: 0.3;
    filter: alpha(opacity=30);
}

.layout-sidebar .layout-tabmenu > .nano > .nano-content > ul.layout-tabmenu-nav {
    padding-bottom: 120px;
}
</style>
in layout.js

Code: Select all

//JS 
/** 
 * PrimeFaces Barcelona Layout
 */
PrimeFaces.widget.Barcelona = PrimeFaces.widget.BaseWidget.extend({
    
    init: function(cfg) {
        this._super(cfg);
        this.wrapper = $(document.body).find('.layout-wrapper');
        this.sidebar = this.wrapper.children('.layout-sidebar');
        this.tabMenu = this.jq;
        this.tabMenuNav = this.tabMenu.children('.layout-tabmenu-nav');
        this.tabMenuNavLinks = this.tabMenuNav.find('a');
        this.tabMenuContents = this.tabMenu.find('.layout-tabmenu-content');
        this.topbar = this.wrapper.children('.topbar');
        this.topbarMenu = this.topbar.children('.topbar-menu');
        this.topbarItems = this.topbarMenu.children('li');
        this.topbarLinks = this.topbarItems.children('a');
        this.topbarMenuButton = $('#topbar-menu-button');        
        this.menuActive = false;
        this.sidebarClick = false;
        this.topbarLinkClick = false;
        this.topbarMenuClick = false;

	//Please add the following lines
	//*****************************************************
               //workaround from PF for nano scroll
        	this.tabMenuNav.wrap('<div class="nano" style="width:60px;"></div>').wrap('<div class="nano-content menu-scroll-content"></div>');
        	var nano = this.tabMenuNav.closest('.nano');
    		nano.nanoScroller({flash:true}); 
    	//*****************************************************
        
        this._bindEvents();
        this._restoreMenuState();
    },
  ...

Please remove my above changes in WEB-INF/menu.xhtml.

Post Reply

Return to “Barcelona - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest