Flyout Menu Cut Off Except in IE

[jackdeland]

I'm using topnav with menu.flskn. Click the hamburger in IE and the titles are aligned correctly (02.png). Click the hamburger in Chrome or Firefox and the titles display correctly for the first time only. Click it again to return to the flyout, and titles are jammed to the left. (01.png). This happens on my laptop at work (Win 7 Pro), at home on my PC (Win 7 Ultimate) and on my home laptop (Win 10, using Edge).

Support is working on this (thanks, Jon), but I am wondering whether anyone out in the world has come across this. It works fine in the support configurations tested.

Anyone?

[jackdeland]

Here is a part of the message received from Support: It has to do with how Chrome and Firefox use their scroll bars compared to IE and Edge. Since your first level of your TOC is so long, a second scroll bar is required to scroll through the flyout menu. In IE and Edge, the second scroll bar is layered on top of the flyout menu so it doesn't affect the size of the page. In Chrome and Firefox, the second scroll bar affects where the flyout menu starts, so this is why the second level flyout menu moved too far to the left and cuts off some of the text.
Case closed!

[Titus]

Well.. this is kind of terrible.. Is there a solution to this?

My flyout menu TOC is way longer than most of my topics, so the extra scroll bars just mess everything up in the flyout.

EDIT: I think I found a solution, at least for my project, by adding the following to my stylesheet:

Code: Select all

.right-submenu.move-left
{
	left: 0;
}