Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add stickyTopAt attribute to DataTable #2449

Closed
Rapster opened this Issue Jun 16, 2017 · 10 comments

Comments

Projects
None yet
3 participants
@Rapster
Copy link
Member

Rapster commented Jun 16, 2017

So far, a sticky always goes to the top the page, but I'd like to make it sticky relative to the header of my page (otherwise it does not look fancy at all). I'll show you an example with Barcelena layout (it's a mock)

sticky

It would be really fancy to have the columns sticky to the header of the page, what do you think?

@Rapster

This comment has been minimized.

Copy link
Member Author

Rapster commented Sep 25, 2017

A workaround wrote by @mertsincan (thanks to him) proposed here: https://forum.primefaces.org/posting.php?mode=reply&f=53&t=52269

@Rapster

This comment has been minimized.

Copy link
Member Author

Rapster commented Sep 25, 2017

To make it simple, a new attribute could be created stickyRelativeTo expecting a jquery selector (e.g .topbar or #top_bar)

@tandraschko

This comment has been minimized.

Copy link
Member

tandraschko commented Jul 4, 2018

Should be fixed by #834
Could you try?
We automatically check now for the scrollparent

@Rapster

This comment has been minimized.

Copy link
Member Author

Rapster commented Jul 4, 2018

834 does not sound like a duplicate to me, it's a total different problem. This one is about making the sticky, no longer on the top of the page but relative to another element (e.g premium template have topbar, and sticky should be displayed right below it and not on the top of the page). I thought Mert would provide something... I can think about providing a fix

@tandraschko

This comment has been minimized.

Copy link
Member

tandraschko commented Jul 4, 2018

This one is about making the sticky, no longer on the top of the page but relative to another element (e.g premium template have topbar, and sticky should be displayed right below it and not on the top of the page)

Thats exact the problem in #834. Maybe it already works fine in the Premium Layouts.

@Rapster

This comment has been minimized.

Copy link
Member Author

Rapster commented Jul 4, 2018

Thomas, as it is today, stickyHeader will be displayed on the top (which is normal, it's done by design). 384 is about an issue of stickyHeader when contained in a p:layout

@tandraschko

This comment has been minimized.

Copy link
Member

tandraschko commented Jul 4, 2018

Its not about p:Layout, its about every scollparent, when the scrollparent is not document itself.

@Rapster

This comment has been minimized.

Copy link
Member Author

Rapster commented Jul 10, 2018

FYI, on Premium Layouts a tweak is used: https://forum.primefaces.org/viewtopic.php?f=53&t=52269

@tandraschko tandraschko removed the duplicate label Aug 30, 2018

@Rapster

This comment has been minimized.

Copy link
Member Author

Rapster commented Dec 15, 2018

In the showcase, a trick is used:

    <ui:define name="head">
        <style type="text/css">
            .ui-sticky {
                top: 70px !important;
                position: fixed !important;
            }
            @media (max-width: 960px) {
                .ui-sticky {
                    top: 110px !important;
                }
            }
        </style>
    </ui:define>

As it is common to have a topbar in website nowadays, I'd suggest to have this new attribute (stickyAt?)

@mertsincan mertsincan self-assigned this Feb 11, 2019

@mertsincan mertsincan added the 6.2.17 label Feb 11, 2019

@mertsincan mertsincan added this to the 7.0 milestone Feb 11, 2019

@mertsincan mertsincan changed the title Sticky datatable relative to "something" (e.g header) Add stickyTopAt attribute to DataTable Feb 11, 2019

@mertsincan

This comment has been minimized.

Copy link
Member

mertsincan commented Feb 11, 2019

In the showcase, I removed the above css. Please try;

<p:dataTable var="car" value="#{dtStickyView.cars}" stickyHeader="true" stickyTopAt=".layout-topbar">
            <p:column headerText="Id">
                <h:outputText value="#{car.id}" />
            </p:column>
            <p:column headerText="Year">
                <h:outputText value="#{car.year}" />
            </p:column>
            <p:column headerText="Brand">
                <h:outputText value="#{car.brand}" />
            </p:column>
            <p:column headerText="Color">
                <h:outputText value="#{car.color}" />
            </p:column>
        </p:dataTable>

On Barcelona Layout, you need to make the following change to re-calculate stickyHeader according to menu animation;

$(window).trigger('resize', {delay:350}); //line 52 and 101
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.