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

Incompatibility between tables with sticky table header and page header #1052

Open
migrund opened this issue Jan 3, 2025 · 0 comments · May be fixed by #1053
Open

Incompatibility between tables with sticky table header and page header #1052

migrund opened this issue Jan 3, 2025 · 0 comments · May be fixed by #1053
Assignees
Labels

Comments

@migrund
Copy link

migrund commented Jan 3, 2025

I am currently building a frontend with the db-ui core and found following issue:

When using a standard <header class="rea-header"> in combination with a <table class="cmp-table" data-sticky="header"> element, the sticky-header of the table gets lost behind the page header of the webpage.

While researching for a fix to that topic I found a site telling me, that position:sticky should not be used on a <thead> element and instead on the <th> element in the table. (I sadly don't have the link anymore)

I also found a workaround that works for me, but probably isn't the best way, as it has a fixed top definition in my CSS file and I also needed to set a box-shadow for getting a (neat) border between the sticky header and other content.
Here is the workaround in CSS:

.cmp-table[data-sticky=header] th {
    background: var(--db-color-white);
    position: sticky;
    top: 70px;
    box-shadow: inset 0 -1px 0px 0px rgba(0, 0, 0, 0.4);
}

With that workaround in place there was also another problem resulting from the backdrop-filter of the "zebra" tables.
It somehow overlapped and therefore then blurred parts of the table header in some instances.
I fixed that by using this:

.cmp-table[data-rows=zebra] tbody tr:nth-child(odd) {
    backdrop-filter: none;
}

I hope this can be fixed in the db-ui/core so we do not need to have that workaround in place or probably more likely won't use data-sticky="header" for our tables,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants