Comments (6)
Tanner-MS
commented on August 26, 2024
1
Hey @pradeepnschrodinger, this did work for us. Thanks for the suggestion! This issue can be closed.
from fixed-data-table-2.
Tanner-MS
commented on August 26, 2024
I would alter this ask slightly and ask for a solution that doesn't use any z-indexes (scrollbars as well)
from fixed-data-table-2.
pradeepnschrodinger
commented on August 26, 2024
@grosiles3 , could you mention the environment used here? --
Such as the version of FDT being used, OS name and version, browser name and version, and whether this is on PC or on mobile?
It would also be great if you could provide a way for us to reproduce this, maybe on codesandbox.
from fixed-data-table-2.
grosiles3
commented on August 26, 2024
Hi Niranjan,
Sure, we are using the latest version of FDT (1.2.11) although this issue has existed for a very long time from what I can see. I mainly use Chrome (current version 103.0.5060.114) but it also repro's in other browsers, such as Edge. I've only ever tested this on PC not sure what it looks like on mobile.
I created a sandbox that repro's it here - https://codesandbox.io/s/fixed-right-column-forked-jufkcr
If you mouse over "mouse over me", notice how the dropdown gets hidden behind the column header (because that row has a z-index of 1)
***@***.***
and this is what the dropdown should look like
***@***.***
Let us know if you have any other questions.
Thanks,
Guillermo Rosiles
From: Niranjan Pradeep ***@***.***>
Sent: Thursday, July 7, 2022 2:23 AM
To: schrodinger/fixed-data-table-2 ***@***.***>
Cc: Guillermo Rosiles ***@***.***>; Mention ***@***.***>
Subject: Re: [schrodinger/fixed-data-table-2] Z-index 1 set on column header causes header to overlap other elements (Issue #652)
@grosiles3<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fgrosiles3&data=05%7C01%7CGuillermo.Rosiles%40microsoft.com%7C2328176fb9784b9ac82308da5fe9962f%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637927754102686789%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=kzH4HhmVEoEw%2BSRTJb5Onphy7gUbLyvJ3qG8oZl1%2FsM%3D&reserved=0> , could you mention the environment used here? --
Such as the version of FDT being used, OS name and version, browser name and version, and whether this is on PC or on mobile?
It would also be great if you could provide a way for us to reproduce this, maybe on codesandbox<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcodesandbox.io%2Fs%2Ffixed-data-table-basic-example-cwds0%3Ffile%3D%2Fsrc%2Findex.js&data=05%7C01%7CGuillermo.Rosiles%40microsoft.com%7C2328176fb9784b9ac82308da5fe9962f%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637927754102686789%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=YOiBOreNOVp8aAwRd4Dw2R52DNnX8utdchy3t8fet8Q%3D&reserved=0>.
-
Reply to this email directly, view it on GitHub<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fschrodinger%2Ffixed-data-table-2%2Fissues%2F652%23issuecomment-1177187744&data=05%7C01%7CGuillermo.Rosiles%40microsoft.com%7C2328176fb9784b9ac82308da5fe9962f%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637927754102686789%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=Zxju81XA4LLObAoUv8C4i6%2B6wBHOSPq%2FiZk9CE0e9qM%3D&reserved=0>, or unsubscribe<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAX6JWF6Z3AM7U7Z766XRZV3VS2AW7ANCNFSM522TDHIQ&data=05%7C01%7CGuillermo.Rosiles%40microsoft.com%7C2328176fb9784b9ac82308da5fe9962f%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637927754102686789%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=Z%2FNwxSKsBD%2BgyhuLc69hk%2BaF2gKcMqxGytFSum7H1h8%3D&reserved=0>.
You are receiving this because you were mentioned.Message ID: ***@***.******@***.***>>
from fixed-data-table-2.
pradeepnschrodinger
commented on August 26, 2024
Thanks for the example and env details! I had to slightly tweak the codesandbox to render the table but I can reproduce the issue.
I think the simplest thing to do here is adjust z-Indices of the components.
You could either increase the z-Index of the dropdowns/popouts/etc to something higher than the the header row (2 or above in our case).
Or a simpler solution would be to just set the z-Index of the table container to zero.
https://codesandbox.io/s/fixed-right-column-forked-zo0t1j?file=/Index.css
.fixedDataTableLayout_main {
z-index: 0;
}
Let me know if this works out for you.
from fixed-data-table-2.
pradeepnschrodinger
commented on August 26, 2024
Hey @grosiles3 , did the above solution work out?
Feel free to let us know if you still need help here.
from fixed-data-table-2.
Related Issues (20)
- Does it provide infinite scroll? HOT 1
- Resizable rows? HOT 5
- Need drop and play example HOT 3
- Sometimes when scrolling through table rows, I receive warning: Failed prop type: The prop `index` is marked as required in `FixedDataTableRowImpl`, but its value is `null`. HOT 4
- Check the column/cell visibility HOT 9
- Vertical scroll bar when we have many columns HOT 2
- Cannot read properties of null (reading 'onWheel') HOT 6
- Cannot read properties of null (reading 'setRoot') HOT 4
- React 18 question HOT 4
- "Global is not defined" in React Vite app HOT 2
- Error when refreshing data in table with "smaller" data HOT 5
- Is there a way to implement multi-level headers in Fixed Data Table 2 HOT 3
- When using variable row heights, setting `scrollTop` doesn't work well. Fix proposed HOT 4
- Resize line not shown when "maxHeight" is set. HOT 2
- Column resize doesn't properly work on mobile HOT 11
- Resize vertical bar public in header_ FixedDataTableColumnResizerLine_ Main positioning is not accurate HOT 4
- "site-dev-server" script doesn't work after upgrading to npm 9.8.0 HOT 4
- Scroll to an exact position when clicking the scrollbar track doesn't work in case of variable row heights and isVerticalScrollExact = true HOT 3
- Help with keeping scrollLeft property in components in each row when scrolling vertically. HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fixed-data-table-2.