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.
pa:tab pane scroll not appear
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
- Please add the following codes into layout.js
- Add the following css code;
- please change menu.xhtml
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();
},
....
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;
}
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>
...
Github Profile: https://github.com/mertsincan
-
- Posts: 5
- Joined: 20 Jan 2017, 05:01
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 :
menu.xhtml:
Regards.
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();
},
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="" title="Menu">
<h:form id="menu-form">
<pa:menu widgetVar="me">
<p:menuitem id="um_dashboard" value="Dashboard" icon="" outcome="/dashboard"/>
<p:menuitem id="um_user" value="User" icon="people" outcome="/user"/>
<p:menuitem id="um_prog" value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
<p:menuitem value="Programme" icon="" outcome="/programme"/>
</pa:menu>
</h:form>
</pa:tab>
<pa:tab icon="" 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="" outcome="/admin/node"/>
<p:menuitem id="um_budget" value="Budget" icon="" outcome="/admin/budget"/>
<p:menuitem id="um_kpidesc" value="KPI Description" icon="" outcome="/admin/kpi_description"/>
<p:menuitem id="um_carousel" value="Carousel Manager" icon="" 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="" 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="<br/>" 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="<br/>" 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="" title="Report" rendered="#{mb.loggedInUserRole eq 'ROLE_ADMIN'}">
<pa:menu widgetVar="mereport">
<p:menuitem id="um_report" value="Report" icon="" outcome="/admin/report"/>
</pa:menu>
</pa:tab>
</pa:tabMenu>
</div>
</div>
</div>
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
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;
}
Github Profile: https://github.com/mertsincan
-
- Posts: 5
- Joined: 20 Jan 2017, 05:01
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:
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>
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please try the following codes;
in template.xhtml
in layout.js
Please remove my above changes in WEB-INF/menu.xhtml.
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>
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();
},
...
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 24 guests