Page 1 of 1

Data table with sticky header covers drop down menu items

Posted: 10 Jul 2017, 16:38
by kimg
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

Re: Data table with sticky header covers drop down menu items

Posted: 11 Jul 2017, 12:59
by aragorn
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>

Re: Data table with sticky header covers drop down menu items

Posted: 11 Jul 2017, 19:33
by kimg
It works perfectly, thank you.

Will it be part of the next Verona update?

Kim

Re: Data table with sticky header covers drop down menu items

Posted: 12 Jul 2017, 09:25
by aragorn
Glad to hear, thanks for the update!
Will it be part of the next Verona 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/