Action menu gets cut off

[Julie Pichon]

Long action lists get cut off, see for example the admin Instances menu on the screenshot, or try to click "More" on a long action menu for the last item on any table.

This appears to be since commit f3ca2756cc / bug 1267661, "CSS to fix content appearing below side pane".

[Thai Tran (tqtran)]

Yes, it looks like setting (overflow:hidden) on #main_content caused the action list (which is position:absolute) to be hidden.

[OpenStack Infra (hudson-openstack)]

Fix proposed to branch: master
Review: https://review.openstack.org/69553

[Thai Tran (tqtran)]

Have you tried using height:100vh instead?

[Kirill Izotov (enykeev)]

I don't see how it might help. I tried to set height: 100% on #main_content, body and html (which is exactly the same as i understand it), but then you will hit the bottom edge of the window and you would need to manually create a gap for action menu by padding or margin, and then someone else change number of elements in menu and you'll need to change it again...

The real problem here is that overflow:hidden creates new context and cuts off anything that hang outside of it (same as iframe). Another css property that creates new context is display:table, but as opposed to overflow:hidden it doesn't cut off any contents that hangs outside of it. All you have to do is to make sure your block will took all the space left. To do that, we create additional block (:after) that consist of two characters (dots) with the space between them equal to 99in (about 10k pixels, way bigger than any display around). Then we make sure no one except for the browser will see this block and fix some nasty bug in Opera 11 and 12.

This solution are much wider supported by browsers than vh and it fixes all the cases this issue appears.

[Thai Tran (tqtran)]

If you combine overflow:hidden with height:100vh, it will fix the problem. However, it does seem like vh will work only on Opera v15 and above, and is only partially supported in IE9 and 10.

[Cindy Lu (clu-m)]

When I make the browser window narrow, the data table drops down below side panel.

[David Lyle (david-lyle)]

I think the correct solution is to revert this. The new problem is far more prevalent than the former.

[David Lyle (david-lyle)]

by this I meant the previous patch: https://review.openstack.org/#/c/70799/

[Kirill Izotov (enykeev)]

New version has been uploaded for review. The problem in webkit browsers was related to min-width on .topbar block.

I have tested and wasn't been able to reproduce:
 - pre min-width issue (https://bugs.launchpad.net/horizon/+bug/955695)
 - pre overflow:hidden issue (https://bugs.launchpad.net/bugs/1267661)
 - horizontal cut off (https://bugs.launchpad.net/horizon/+bug/1274653)

So i still think it's a viable solution.

[David Lyle (david-lyle)]

https://review.openstack.org/#/c/70799/ the revert of original change merged. There are pending navigation changes up for review. This changes the page layout as well. https://review.openstack.org/#/c/70034/ As this solution was intended as a stopgap to begin with let's focus on getting the new layout right.