In order for you to understand why i can't cut and paste a lot of code here you need to know that this is a sharepoint app so my action field regarding customize css and specially html is kinda limited. This is the scenario: I have a series of tables that have dropdown menus in some of the TD's, all the tables have the overflow-x set to auto so the user can scroll horizontally if the table content is wider than the screen width. As you can see in the captures apparently the overflow-x auto is causing the dropdowns to get cutoff even when their z-index is bigger than the tables. I've tried everything but can't get a solution.
enter image description here
div containing the table css:
.ms-webpart-zone.ms-fullWidth .ms-webpartzone-cell { display: block; overflow-x: auto; overflow-y: visible; min-height: 220px; position: relative; z-index: 10; } Dropdown css:
top: 10px; position: absolute; visibility: visible; left: 88px; width: 226px; 
4 Answers
Answers 1
You can try with your drop-down:
position: absolute; display: block; top: depend on your parent element of dropdown left: the same with top Answers 2
Does position: fixed on drop down helps?
top: 10px; position: fixed; visibility: visible; left: 88px; width: 226px; Answers 3
Looks like your main-wrapper around the table, is "over" your dropdown. Would make sense, looking at your two screenshots.
The dropdown's not cut off, the grey square around your table - containing "Workflows > Viabilidad..." - just lays in front of it and probably has a higher z-index or sth.
Check this grey wrapper. Maybe make it opaque to see what's going on "behind".
Answers 4
Try to modify the dropdown CSS as below:
top: 10px; position: absolute; visibility: visible; left: 150px; width: 226px; bottom:50px; 
0 comments:
Post a Comment