search

observablehq / inputs

Better input elements
https://observablehq.com/framework/lib/inputs
ISC License
125 stars 34 forks source link

Inputs.table header opacity glitch when using custom format #234

Open oluckyman opened 2 years ago

oluckyman commented 2 years ago

When I use custom format with HTML that have opacity, the cell content appears above the table header. See example notebook:

SS 2022-07-26 at 5 22 19 PM

It's not a big deal for prototyping and exploring. But I love Inptuts.table and am using it a lot, including for presenting to users custom tables like this

image
mbostock commented 2 years ago

We could fix this by adding a z-index: 1; here:

https://github.com/observablehq/inputs/blob/3281a4acf1e948284deeeacd179cd7f911e56649/src/style.css#L274-L279

oluckyman commented 2 years ago

Thank you for the quick response!

I am curious is it a known browser bug? Don't understand why normal content renders just fine and the semi-transparent content appears above 🤔

mbostock commented 2 years ago

@oluckyman Here’s a result I found on stacking contexts if you want to learn about this behavior: https://www.oreilly.com/library/view/developing-web-components/9781491905685/ch04.html

oluckyman commented 2 years ago

Thanks Mike, it was helpful! 🙌

If someone curious too, this peace was missing in my mental model:

A stacking context is created when an element is positioned and assigned a z-index value other than auto, or when an element has an opacity value less than 1

So by setting opacity to the cell of the table I made it compete with the stacking context of the header, which has position: sticky.

Knowing this I fixed the glitch by setting position: relative; z-index: -1 to my custom HTML in table cells.

Added the workaround to the notebook:

image