Menu display on a Phone profile.

Answered
0
0

Hi.

I have just managed to work with profiles and it’s been amazing.

I have an issue, though, with my Main Menu on the top of my Main Page. Once running on a Phone profile, the menu properly shows the “hamburguer” icon on the right since it is truncated. Clicking on it we get to the top options, perfect. Choosing one with sub-items shows the next level of the dropped down menu, OK. But once we get to the next level of sub-items, it doesn’t take into consideration the view-port anymore and truncates all items shown. I have attached a sequence of screen shots to demonstrate what I mean.

Would you guys know of a way I could avoid this?

Thanks in advance.

Ivan

Attachment
  • You must to post comments
Good Answer
0
0

Thank you. It seems to be a bug in the repositioning of an  overflowing menu based on an already overflowing menu in the js library. The best fix in your case I believe it’s to change the position of the child menu to align bottom left. See screenshot.

This is the theme mixin:

{
 "appearances": {
 "menu": {
 "inherit": "menu",
 "states": {
 "submenu": {
 "properties": {
 "position": "bottom-left",
 "placementModeX": "best-fit"
 }
 }
 }
 }
 }
}

If you are using a custom theme just add/change the properties in the “submenu” state under “menu”.

 

Attachment
  • Ivan Borges
    Thank you! This is gonna help. By the way, can I have the mixin configured just for specific Profiles?
  • Luca (ITG)
    Themes are not related to responsive profiles. But you can load a different theme at any time using Application.LoadTheme() or you can load alternative mixins using Application.LoadTheme(“theme-name”, new []{“Mobile\\mobile.mixin.theme”}); The alternative mixins must be in subfolders in /Themes, otherwise all the mixins in /Themes are always all loaded by default.
  • Ivan Borges
    Brilliant. Thank you Luca.
  • You must to post comments
0
0

Here is your sample after my changes, if you would like.

  • You must to post comments
0
0

Here it is. I just changed your sample to have larger menu items and added some icons to them. Not too much, they should still fit, but we can see that the last set of menu items are shown on the right side and then being truncated. If they went down beneath the second set, it would fit just fine. This is being tested in Chrome with the iPhone 6/7/8 Plus profile.

I have also published your sample and if I navigate to it from my iPhones I get the same issue.

I see you are using a button and attaching a contextMenu to it, which is cool. However, in my application I have an ordinary MenuBar directly dropped into the top panel, so the “hamburguer” icon will only show up when necessary.

Thanks Luca and sorry if the trouble.

Ivan

Attachment
  • Luca (ITG)
    The contextmenu is shown on click programmatically, otherwise the attached ContextMenu shows on right click only (which is a long-tab on mobile). From the screenshot looks like the other issue with the desktop being out of view is working fine?
  • Ivan Borges
    Unfortunately not, Luca. This screen shot was from Chrome emulator, in which all works fine. This is a screen shot from my iPhone SE: https://drive.google.com/file/d/17BtkctQOdvACYTocNjN1GXB49Wnf_sqy/view?usp=sharing
  • You must to post comments
0
0

Send me the screenshot of my sample in your emulator please. And if possible send me your sample stripped down in a way I can run it. Check also on a another machine or see if your emulator has a zoom factor that is not 1.

  • You must to post comments
0
0

Hi Luca.

Thanks for all your attention on this.

I will have a look at your sample and see if I can come out with something. The thing is, I am not doing anything special, at least I think so. And by the way, in this case, the screen shots I attached are not from my iPhone, but from the Chrome device emulator, I will attach another one here for you to check. Hopefully I will find a way around it or this will become a real issue for the application. My Default.html is apparently set properly, and the device viewport width is set to device-width. Is there anything else I should try?!

Cheers.

Ivan

Attachment
  • You must to post comments
0
0

Looks like the same issue with the docked control. The viewport in your devices seem to be too big. Wisej already adjusts the position of the popups, see attached screenshot on my phone and attached sample.

You can also see in there the usage of a spacer in the top FlexPanel with FillWeight = 1 to push the button to the right.

The placement mode can be controlled in the theme and in the code if you call contextMenu.Show(). In the theme you can set all the MPlacement properties: http://qooxdoo.org/qxl.apiviewer/#qx.ui.core.MPlacement.

 

  • You must to post comments
Showing 6 results
Your Answer

Please first to submit.