RocketTheme - TOPIC: [Solved] Dropdown menu goes off screen when iPad Air is in portrait mode. (2/3)

Welcome Guest! Login

0 items Join Now

- MICHAEL KOONTZ
- Rocketeer
- Posts: 90
- Thanks: 9
Re: SOLVED Dropdown menu goes off screen when iPad Air is in portrait mode.

Posted 10 years 4 months ago
- Hello Mark,
  
  I decided to do a test to find out if the problem I'm experiencing is a problem with any of the code in the .less files or the gantry-custom.css file. I deleted all of the custom .less files and left only the code you gave me in the gantry-custom.css file. The problem remained after all of that. I then decided to uninstall all extensions that I had added outside of anything Gantry or Rocket Theme, still the same result. I even tried reinstalling the RokNavMenu as well as the Gantry Framework Template Bundle but that didn't change the outcome either. The only thing I have not uninstalled is the Greek language pack but I'm doubtful that it is what is causing the problem because I did a fress install of Joomla 3.3.6 with the latest Gantry Framework and template bundle and the problem remains. Turns out this may be a bug of sorts, check it out for yourself and let me know.
  
  Just so you know exactly what I am referring to here is a short YouTube video detailing the issue.
  http://youtu.be/R2puIKFg9mg
  
  regards,
  
  Michael
#1158928
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: SOLVED Dropdown menu goes off screen when iPad Air is in portrait mode.

Posted 10 years 4 months ago
- Use this additional code...
  
  ul.gf-menu .dropdown { pointer-events: none; } ul.gf-menu li:hover > .dropdown, .gf-menu li.active:hover > .dropdown { pointer-events: auto; }
  
  And CHANGE your existing custom CSS to this...
  
  ul.gf-menu li.item284 .dropdown { border-top-left-radius: 5px !important; border-top-right-radius: 0 !important; left: auto !important; right: -1px !important; }
  
  Regards, Mark.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
#1159024
- MICHAEL KOONTZ
- Rocketeer
- Posts: 90
- Thanks: 9
Re: SOLVED Dropdown menu goes off screen when iPad Air is in portrait mode.

Posted 10 years 4 months ago
- Mark,
  
  Thank you for the reply. I have added your code to the gantry-custom.css file for the http://gantrytest.xeiropraktiki.info site as follows:
  ul.gf-menu li.item238 .dropdown { border-top-left-radius: 5px !important; border-top-right-radius: 0px !important; left: auto !important; right: -1px !important; } ul.gf-menu .dropdown { pointer-events: none; } ul.gf-menu li:hover > .dropdown, .gf-menu li.active:hover > .dropdown { pointer-events: auto; }
  
  Is that what you meant?
  I know for my site I will need to replace 238 with 284 but is the rest correct?
  The problem I showed you in the video with the dropdown menu appearing when it shouldn't has gone away.
  Also, the dropdown menu item stays left instead of starting left then going right after tapped/clicked.
  
  However the problem still remains on the iPad where when tapping the menu item (button) it goes straight away to the link instead of the dropdown staying open waiting for another action.
  
  In case this problem doesn't present itself on your iPad I recorded a short 20 second video (without audio) showing what happens.
  http://youtu.be/N5GddM7PAd0
  
  regards,
  
  Michael
  
  P.S. - I restored the http://hca.xeiropraktiki.info site from backup so I could work with this with all the extensions I've added and applied your code to the gantry-custom.css file like so:
  /* TO TURN ARTHRA MENU ITEM DROPDOWN TO THE LEFT ON IPAD */ ul.gf-menu li.item284 .dropdown { border-top-left-radius: 5px !important; border-top-right-radius: 0 !important; left: auto !important; right: -1px !important; } ul.gf-menu .dropdown { pointer-events: none; } ul.gf-menu li:hover > .dropdown, .gf-menu li.active:hover > .dropdown { pointer-events: auto; }
  
  so I could test it there as well and it also, while overall better, has the same problem I described above with the iPad. Everything else is working great!
  
  Also in case you're wondering I have removed the menu-custom.less file as there was nothing else in it but something to fix this and I have removed any reference to this from the template-custom.less file as well. So for now the only reference to this is in the gantry-custom.css file.
- Last Edit: 10 years 4 months ago by MICHAEL KOONTZ. Reason: Added extra information
#1159047
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: SOLVED Dropdown menu goes off screen when iPad Air is in portrait mode.

Posted 10 years 4 months ago
- login does not work.
  
  Regards, Mark.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
#1159328
- MICHAEL KOONTZ
- Rocketeer
- Posts: 90
- Thanks: 9
Re: SOLVED Dropdown menu goes off screen when iPad Air is in portrait mode.

Posted 10 years 4 months ago
- Sorry, I fixed the login. I forgot the user account was disabled in the backup I restored.
  
  regards,
  
  Michael
#1159340
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: SOLVED Dropdown menu goes off screen when iPad Air is in portrait mode.

Posted 10 years 4 months ago
- To be honest I'm a bit lost where we are right now.
  
  Your original issue was about a particular dropdown going off the right hand side of screen. I gave you a fix for that and as part of that how to stop the flickering when you moved cursor near that area. So I believe we fixed you original issue. But if you want much more detail how you can do that in a more robust way then please see http://www.rockettheme.com/forum/joomla-general-questions/221324-how-to-change-the-menu-dropdown-direction?start=0#1087366
  
  Regarding the click issue on the menu item - you need to click very briefly (a very quick tap) otherwise it's interpreted as a click. I just tried this on my ipad3 and it worked fine.
  
  Regards, Mark.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
#1159445
- MICHAEL KOONTZ
- Rocketeer
- Posts: 90
- Thanks: 9
Re: SOLVED Dropdown menu goes off screen when iPad Air is in portrait mode.

Posted 10 years 4 months ago
- I'm posting this update on top of my post because I have found something interesting. Turns out this isn't an iOS 7 vs iOS 8 issue. I believe it is some kind of weird permissions issue. If you login with the superuser access I gave you then the menu item works fine with the code you provided. When I login to the front end of the site I've been using a basic guest account. If you login with the guest account available for offline access
  http://hca.xeiropraktiki.info
  username: gantry
  password: gantry
  
  you'll experience the same problem I am. Please check this out as it appears to be some kind of permissions issue.
  I also put the site online and cleared the cache and cookies and it still experiences the same problem when set to online. Only users logged in as superuser do not experience the issue.
  
  regards,
  
  Michael
  
  P.S. - I deleted the non-pertinent info in the post below regarding iOS versions.
  
  ****************************
  
  Hello Mark,
  
  Once again thank you for your help and your patience.
  The link you provided doesn't work for me. I get a "403 Forbidden" error when visiting that link.
  
  To recap, Yes the code you first provided to me worked at affecting the dropdown for the menu item Άρθρα across all platforms.
  
  With that initial code there were a couple of problems. They were:
  1) There was a flicker on desktops
  2) When on the page that the menu item Άρθρα pointed to the dropdown still went right.
  3) On iPad's the code did something where the dropdown did not stay open after the menu item was tapped for NON-superusers. For logged in superusers the code works fine.
  
  With your follow up code the first 2 issues were solved. However the 3rd one remains.
  
  If this isn't something that can be addressed then I need to start thinking about a different option to address the original issue which was that when a tablet is in Portrait mode the Άρθρα dropdown menu pushes off the side of the screen.
  It seems like this could be a bug of sorts.
  Is this something you think I can receive help on or should I look elsewhere?
  
  Thank you again for your time!
  
  regards,
  
  Michael
- Last Edit: 10 years 4 months ago by MICHAEL KOONTZ.
#1159636
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: SOLVED Dropdown menu goes off screen when iPad Air is in portrait mode.

Posted 10 years 4 months ago
- Why not just save yourself lots of grief and simply change the order of the menu items so that that one is not the last on the line.
  
  Regards, Mark.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
#1159735
- MICHAEL KOONTZ
- Rocketeer
- Posts: 90
- Thanks: 9
Re: SOLVED Dropdown menu goes off screen when iPad Air is in portrait mode.

Posted 10 years 4 months ago
- Good Morning Mark,
  
  Thank you for the suggestion but the association would prefer that the menu items stay in the order they are currently in. For now I will continue to use the code I have for the menu-custom.less file which I mentioned earlier in this thread . It affect's all the menu items with dropdowns with a tablet in portrait mode and even with adding .item284 it still affects all the dropdowns so I've just removed the 284.
  
  In regards to you code. It appears that it may be a fluke that it even works on our associations site when logged in as a superuser. I mentioned in my previous post, on my test site hca.xeiropraktiki.info , it seems it is some kind of permissions issue but now I'm not sure.
  
  I tried to replicate the issue on the brand new joomla test site I put up last week.
  gantrytest.xeiropraktiki.info
  It was added using a joomla autoinstaller which only contains demo content. I added the gantry template bundle as well but nothing else. I added your code to the gantry-custom.css accounting for the menu item id# change. I created the offline guest account as well as another superuser account. The dropdown menu item "Sample Sites" works fine on desktops but again on tablets or at least on iPad's, it goes directly to it's link and the dropdown menu item doesn't stay open.
  
  This morning, I once again tried to replicate the problem with an installation of Joomla using the Gantry Rocket Launcher.
  gantryrl.xeiropraktiki.info
  I did not do any updates. I left the site online. I added a login module to the sidebar-a position and created a superuser account for you to use to login with to see that it doesn't behave the same as the associations test site. I added your code to the gantry-custom.css file accounting for the menu item id# change. I chose to target the "Joomla" menu item. The result was the same as it was for the other test site mentioned above. On tablets or at least on iPad's, the dropdown menu doesn't stay open and it immediately opens the menu item link showing the dropdown only briefly.
  
  It seems it was a fluke that it worked on the associations test site or there is something else going on which can account for it not working on 2 brand new installations because unlike the associations site, no matter what account type is used to login, the result is the same, on tablets or at least on an iPad using Safari and Chrome, it goes straight to the link and does not keep the dropdown menu open.
  
  I'm also assuming the Left or Right options shown for the dropdown menu on this link
  http://www.rockettheme.com/docs/joomla/extensions/roknavmenu/setup.md
  are only available with paid templates and not the free Gantry Framework Template, correct?
  Dropdown on Large
  Dropdown on Desktop
  Dropdown on Tablet
  
  best regards,
  
  Michael
#1159901
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: SOLVED Dropdown menu goes off screen when iPad Air is in portrait mode.

Posted 10 years 4 months ago
- Well, I just did a rocketlauncher teest site of my own and compared the action against your rocketlauncher site - and they are different in behaviours. On you site I cannot tap "joomla" to get the dropdown - but on my test site it works!
  
  So, then I commented out the CSS you had put in that RL - and then your site works! - so it has something to do with that CSS that I gave you...
  
  ... I will investigate further...
  
  Regards, Mark.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
#1159924