I have confirmed the issue and I'm kind of surprised that no one else has experienced it (yet).
It doesn't affect just the Chrome browser OR iPhones exclusively. It seems that it affects any resolution below 750px. For anyone who wants to recreate the issue, this is how to do it:
* Reduce your browser window resolution to BELOW 750px width (this will automatically collapse the admin sidebar).
* Click on any option on the admin sidebar to load a new page (IE: Configuration -> Settings).
* Once the Settings page loads, go back to the admin sidebar and hover your mouse over the menu options. You'll see that the menu layout starts moving all over the place.
Desktop screenshot showing issue here:
Now,
I've found a fix for this - and I don't know whether it was a mistake by the programmers or if it breaks functionality somewhere, but it fixed the problem for me.* Open the following file: \Areas\Admin\Views\Shared\_AdminLayout.cshtml
* Navigate to the bottom of the file. You will see a few javascript scripts.
* Find this particular section:
//save sidebar preferences
$('a.sidebar-toggle').on('click', function () {
var collapsed =
!$('body').hasClass('sidebar-collapse');
saveUserPreferences('@(Url.Action("SavePreference", "Preferences"))', '@hideSidebarAttributeName', collapsed);
});
* Remove the "!" after "var collapsed = " (shown above in boldface). The new code should look as follows:
//save sidebar preferences
$('a.sidebar-toggle').on('click', function () {
var collapsed = $('body').hasClass('sidebar-collapse');
saveUserPreferences('@(Url.Action("SavePreference", "Preferences"))', '@hideSidebarAttributeName', collapsed);
});
The above worked for me and it hasn't caused me any issues since.
