Data table with sticky header covers drop down menu items

Post Reply
kimg
Posts: 21
Joined: 22 Aug 2013, 17:13

10 Jul 2017, 16:38

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

User avatar
aragorn
Posts: 2555
Joined: 29 Jun 2013, 12:38

11 Jul 2017, 12:59

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>

kimg
Posts: 21
Joined: 22 Aug 2013, 17:13

11 Jul 2017, 19:33

It works perfectly, thank you.

Will it be part of the next Verona update?

Kim

User avatar
aragorn
Posts: 2555
Joined: 29 Jun 2013, 12:38

12 Jul 2017, 09:25

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/

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest