(This is for SharePoint 2013.)
I am having a hard time figuring out the "css magic" to prevent the "Pop Up" menu (than appears when you click on a Column in a List View) from "cut off". Basically, when I set the (XsltListView) Web Part to a fixed Width or Height, it causes anything within that Web Part (including those "Pop Up" menus) to be "hidden" when they overflow the fixed width/height. This is certainly "expected" and the proper way for the Web Part to behave, but in this situation, I would like to be able to change the css on the Pop Up Menu's so that their content isn't cutoff (hidden), but is instead shown (visible). I can modify the CSS of the page by adding a "Content Editor" web part or even by using Share Point Designer directly. The "problem" is just figuring out EXACTLY what to change in the markup/css. I have tried MANY things (css changes) via the IE, FireFox and Chrome built in "developer tools" and just can't seem to figure this out. The obvious solution (at least to me) would be to insure that the "div" that contains the "Pop Up" menu is set to "Overflow: visible" AND has a "z-index" that is larger than any element under it (and for z-index to work, the element has to be "positioned", position: fixed, absolute or relative). I have tried this and can't get it to work in IE, FireFox or Chrome. :(
I'm not opposed to using jQuery and modifying the css dynamically "onClick" or something similar, but I don't want to change the "overflow" for the ENTIRE List View "div" as this would cause many list items to all of a sudden appear and fill up the browser window (since I am using a fixed height).
The easiest way to recreate this is to create a new "Web Part" page, then add a "List View" (by clicking "Add a Web Part", then choosing "Apps", then choose any of your Lists or Document Libraries). Edit the Web part, then go "Appearance" and set a fixed Height or Width (set it to something small like 100 or 200 pixels to insure the menus "overflow" the div and get cutoff). Save the page and try it out. You will notice that when you click on one of the column headers (especially the first and last one, if you set a fixed width), it will get "cut off".
For reference, here are some things (HTML tags/elements and css) to look for in the rendered HTML:
- The "table" that contains the List View will have class="ms-listviewtable".
- This table will consist of a single row and that "tr" will have class="ms-viewheadertr".
- Then, the "Pop Up" menus are defined underneath each "th" (starting with the second "th").
- These "th" (header cells) have class="ms-vh" or class="ms-vh2" (and will have class="ms-headerCellStyleMenuOpen" applied when the menu is opened for that column).
- Within that "th" (for the column that was clicked and therefore has an "open menu"), the containing "div" will have class="ms-core-menu-box" (and a z-index larger than the containing table defined above!).
- Within that div, the menu is defined as an UnOrdered List "ou" with class="ms-core-menu-list".
- And finally, each item in the menu will be a "li" and have class="ms-core-menu-item".
Hopefully that will help anyone looking to diagnose issues with these pop up menus (and/or anyone attempting to help me resolve this particular issue). :)
Thanks for any feedback! Shayne
