I have a layout exactly like the verona live preview.
Except for text and lnks I have not changed much.
If I create a data table with sticky header attribute in the 'content' area of the page shown, any menu item that drops down and 'touches' the data tables header is covered by the data tables header.
I have tried to play with the z-index. It seems that a table header with sticky header attribute has a zindex of 1001.
I tried to assign a zindex on the menu and menuitems of 1003 which i guess is enough for the menu items to always be on top.
but I can't make it work.
This is not only the verona layout. It also happens when i use the other layouts.
Is it possible also to have the heading of the data table stop just below the menu bar and not go past it when the data table is scrolled?
Kim
Data table with sticky header covers drop down menu items
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 try;
Code: Select all
//Css
@media (min-width:1024px) {
.layout-wrapper .topbar {
z-index: 999999;
}
}
<script type="text/javascript">
//<![CDATA[
if(PrimeFaces.widget.DataTable) {
//@Override
PrimeFaces.widget.DataTable.prototype.setupStickyHeader = function() {
var table = this.thead.parent(),
offset = table.offset(),
win = $(window),
$this = this,
stickyNS = 'scroll.' + this.id,
resizeNS = 'resize.sticky-' + this.id,
orginTableContent = this.jq.find('> .ui-datatable-tablewrapper > table'),
layoutTopbar = $('.topbar'),
layoutHeaderHeight = layoutTopbar ? layoutTopbar.outerHeight() : 0; // added the height of layout header.
this.stickyContainer = $('<div class="ui-datatable ui-datatable-sticky ui-widget"><table></table></div>');
this.clone = this.thead.clone(false);
this.stickyContainer.children('table').append(this.thead);
table.prepend(this.clone);
this.stickyContainer.css({
position: 'absolute',
width: table.outerWidth(),
top: offset.top,
left: offset.left,
'z-index': ++PrimeFaces.zindex
});
this.jq.prepend(this.stickyContainer);
if(this.cfg.resizableColumns) {
this.relativeHeight = 0;
}
win.off(stickyNS).on(stickyNS, function() {
var scrollTop = win.scrollTop(),
tableOffset = table.offset();
if(scrollTop + layoutHeaderHeight > tableOffset.top) {
$this.stickyContainer.css({
'position': 'fixed',
'top': layoutHeaderHeight
})
.addClass('ui-shadow ui-sticky');
if($this.cfg.resizableColumns) {
$this.relativeHeight = (scrollTop + layoutHeaderHeight) - tableOffset.top;
}
if(scrollTop + layoutHeaderHeight >= (tableOffset.top + $this.tbody.height()))
$this.stickyContainer.hide();
else
$this.stickyContainer.show();
}
else {
$this.stickyContainer.css({
'position': 'absolute',
'top': tableOffset.top
})
.removeClass('ui-shadow ui-sticky');
if($this.stickyContainer.is(':hidden')) {
$this.stickyContainer.show();
}
if($this.cfg.resizableColumns) {
$this.relativeHeight = 0;
}
}
})
.off(resizeNS).on(resizeNS, function() {
$this.stickyContainer.hide();
setTimeout(function() {
$this.stickyContainer.css('left', orginTableContent.offset().left);
$this.stickyContainer.width(table.outerWidth());
$this.stickyContainer.show();
},350);
});
//filter support
this.clone.find('.ui-column-filter').prop('disabled', true);
};
}
//]]>
</script>
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Glad to hear, thanks for the update!
- Unfortunately, no. You can add my script into layout.js. Also, Verona 2.1.0 released; https://www.primefaces.org/verona-2-1-0-released/Will it be part of the next Verona update?
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 14 guests