You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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:
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,
The text was updated successfully, but these errors were encountered:
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 abox-shadow
for getting a (neat) border between the sticky header and other content.Here is the workaround in CSS:
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:
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,The text was updated successfully, but these errors were encountered: