0
Welcome Guest! Login
0 items Join Now

SOLVED Dropdown menu goes off screen when iPad Air is in portrait mode.

Last Post
Search Topic

  • SOLVED Dropdown menu goes off screen when iPad Air is in portrait mode.

    Posted 10 years 5 months ago
    • Joomla! v.3.3.6
      Gantry v.4.1.26
      Template - Gantry Framework

      To follow along here is the site information.
      hca.xeiropraktiki.info
      username: gantry
      password: gantry
      Superuser access has been provided in the secure tab.

      The site is Multilingual, Greek & English.
      You can kind of recreate the problem by changing the browser size to fit that of a tablet in portrait mode. I say kind of because another problem presents it's self when you flip from landscap to portrait.

      Once you login and you see the Menu you should reduce the screen size to that of a Tablet in portrait mode.
      In doing so, the menu item "Άρθρα" will be the top right most menu item close to the screen edge.
      When you hover over Άρθρα with your mouse you'll notice that the right side of the dropdown menu is slightly off screen instead of lining up with the screen edge. On an iPad you would simply tap the Άρθρα menu item to see how the dropdown moves off the screen.
      If you are using an iPad in portrait mode, then tap on Άρθρα to see the dropdown menu and then switch to Landscape mode you'll see that the screen becomes zoomed in.

      If you start out by using the iPad in Landscape mode, then tap on Άρθρα to see the dropdown menu, then switch to portrait mode, you'll see an extra strip of the screen to the right of the menu off to the side of the page.

      It did the same thing when the site was in English with the menu item "News" however I manually constrained the width of that dropdown in pixels making it narrower thus removing the problem the English side. If I try this with the Άρθρα menu item on the Greek side, due to the long article names it just looks bad.

      How can I fix this so that it doesn't push off the normal viewing screen and constrains the dropdown menu?

      regards,

      Michael
    #1158147
    • MrT's Avatar
    • 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 5 months ago
    • Use this code...
      ul.gf-menu li.item284 .dropdown {
    left: auto;
    right: 0px;
}
      This is how to create a custom CSS compatible with Gantry 4...

      Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_fracture). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"

      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.
    #1158158

  • Re: SOLVED Dropdown menu goes off screen when iPad Air is in portrait mode.

    Posted 10 years 5 months ago
    • Hello Mark,

      Thank you for your help and input! It is greatly appreciated!

      I added the code your provided me to my existing gantry-custom.css file but it affected the menu item across all platforms.
      It also caused it to behave improperly on the iPad. Now, when you tap the Άρθρα menu item it opens the dropdown briefly and then goes straight to it's link instead of showing the dropdown and letting you select what you want.

      I realize now I was targeting the menu item incorrectly. The code I was trying to use before was this
      .gf-menu .dropdown ul .item284 {border-top-left-radius: 5px !important;}
.gf-menu li:hover > .dropdown ul .item284, .gf-menu li.active:hover > .dropdown ul .item284 {left: -35px !important;}

      I obtained that by using firebug to inspect the elements on the page and then tried to modify it to target the menu item but was off as it did nothing for me.

      Now what I have done is to implement what you gave me so that it only affects the menu item with a tablet in Portrait mode with the following code.
      /* IPAD IN PORTRAIT MODE */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 959px) 
and (orientation : portrait) {

/* TO FIX MENU ITEM ARTHRA ON IPAD AIR  */
ul.gf-menu li.item284 .dropdown {
    border-top-left-radius: 5px !important;
    border-top-right-radius: 0px !important;
    left: auto;
    right: -1px;
}
}

      That code works great as far as only affecting the menu item on tablets in Portrait mode.
      However it doesn't solve the problem described above where the dropdown is only displayed briefly after the menu item is tapped.

      What else can I do/add to the code to get the menu behaving normally again? i.e. keep the dropdown menu open when the menu item is first tapped instead of going directly to it's link.

      thanks again,

      Michael

      P.S. - I noticed another problem when implementing your code.
      As I mentioned in my previous post, with your code added, tapping on the menu item Άρθρα displays the dropdown menu only briefly before going to it's respective link.
      When the site is displaying the Άρθρα page and you tap on Άρθρα again to see the dropdown menu it once again reverts to displaying itself as it originally did to the right side pushing outside the site boundaries.
    • Last Edit: 10 years 5 months ago by MICHAEL KOONTZ.
    #1158289
    • MrT's Avatar
    • 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 5 months ago
    • The only thing my CSS does it to make the dropdown align toward the left instead of the right. I didn't bother to put it in a media query since I didn't think there would be any harm in doing this across all viewport sizes - but yes by all means use a media query if you wish to restrict it to just one viewport size.

      The CSS that I gave you also only applied to that one specific menu item - so check on the other pages that it is in fact the same menu item number that is apparently "not working".

      Ipads don't support "hover" - but I did try your site on my ipad, a brief tap on that menu item will show the dropdown, then you can tap on any of the menu items in the dropdown - it works fine for me?

      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.
    #1158462

  • Re: SOLVED Dropdown menu goes off screen when iPad Air is in portrait mode.

    Posted 10 years 5 months ago
    • Hello Mark,

      Thank you for your follow up. I'm not quite sure why it worked on your iPad and not mine. I was viewing the page in Safari as well as Chrome. My iPad is running iOS 7, maybe that was the difference, not sure. In any case, shortly after receiving your reply, I was able to finally tweak it to work the way I wanted and get rid of the other bugs I was seeing on my end. I couldn't have done it without that little bit of code you supplied me! It really helped push me in the right direction! Thank you again for your help!

      My solution was to put the code in the template-custom.less file which upon doing so removed the issue of the Άρθρα menu item dropdown when viewing the Άρθρα page from reverting back to displaying off to the right side after being tapped. It still didn't solve the dropdown from staying open but with a little more tweaking I got it.

      If you would be so kind, please take a look at my solution code to let me know if you see any potential problems with what I did. I would appreciate any feedback.

      regards,

      Michael

      The following code was placed in to the template-custom.less file
      /* IPAD IN PORTRAIT MODE */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 959px) 
and (orientation : portrait) {
/* TO FIX MENU ARTHRA MENU ITEM ON IPAD AIR */
body {
#rt-header {
	.gf-menu {
		li {
			&:hover, &.active:hover > .item284 {
			> .dropdown {
				border-top-left-radius: 5px !important;
				border-top-right-radius: 0px !important;
				left: auto;
				right: -1px;
						}
					}
				}
			}
		}
	}
}
    #1158472
    • MrT's Avatar
    • 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 5 months ago
    • Ok, well if it does what you want then it's fine - curious about the name of the LESS file though?

      My Ipad uses IOS8.1.1 so maybe you should update anyway?

      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.
    #1158475

  • Re: SOLVED Dropdown menu goes off screen when iPad Air is in portrait mode.

    Posted 10 years 5 months ago
    • Thank you Mark,

      Maybe it is the iOS version making the difference. I plan on upgrading eventually but for the time being it's good to know that my solution also fixes the problem for those running iOS 7. Especially since some people with older generation iPad's may have decided not to upgrade to iOS 8.

      Now, you also have me curious about the .less file I chose to add the code to. Another Rocket Theme employee, who had helped me out in the past with a Menu problem, had used the template-custom.less file to make the changes. I figured since he placed code in it for a menu problem, and this was also a menu problem, that it would be ok to put it there as well. Would you suggest using a different -custom.less file?

      regards,

      Michael
    #1158494
    • MrT's Avatar
    • 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 5 months ago
    • Well if template.less is the file that you want to override the template-custom.less is the correct name to use. basically to override less files you should use the filename you want to override with -custom appended.

      I also why you used LESS anyway when you could have done is more simply in CSS.

      This is how to create a custom CSS compatible with Gantry 4...

      Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_fracture). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"



      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.
    #1158496

  • Re: SOLVED Dropdown menu goes off screen when iPad Air is in portrait mode.

    Posted 10 years 4 months ago
    • Hello Mark,

      It would appear that I got ahead of myself yesterday. I had tunnel vision only looking at the the menu item Άρθρα and it's dropdown and didn't think to look at the other menu items with dropdowns. My code, whether it says .item284 or just .item has an affect across all of the menu items with dropdown menu's. While it's not a horrible outcome I would prefer it to only affect .item284.

      I have since cut the code from the template-custom.less file and placed it in menu-custom.less for continuity.

      If you could do me a favor by looking at it and letting me know what I need to do in order for it to affect only the Άρθρα menu item I would greatly appreciate it. I know you said it works on your iPad but as I mentioned in my other post I don't want others running iOS 7 to experience this.

      regards,

      Michael
    #1158717
    • MrT's Avatar
    • 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
    • Both my code and your code only make reference to item284 - therefore nothings else will be affected other than item284. Clear the browser cache on your ipad. Also. in you code I don't believe that "orientation" works reliably.

      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.
    #1158733

Time to create page: 0.054 seconds