[Silk UI Mobile] MenuDrag breaks MenuShow

[Silk UI Mobile] MenuDrag breaks MenuShow

  
Forge Component
(24)
Published on 14 Jun (10 days ago) by OutSystems Labs
24 votes
Published on 14 Jun (10 days ago) by OutSystems Labs

We are using menu with MenuDrag component, but after you drag it to close - MenuShow doesn't work any more, it just shows a screen grayed for a moment, but the menu is not shown. If not use MenuDrag - there is no problem. I tried to find the error myself, but the component is very complicated and I don't have time to play with it.

Do you have ideas for a quick workaround?

Hey Igor!

The MenuDrag is built to function only with the same classes that we use on own our menu, meaning that some verifications go after specific classes that we add to it. MenuDrag pattern was created for our own menu, not for general use. If you are not using the same classes it's highly likely that it will break or not work in the same way. 

Are you using the classes? and if you are, are you sure that they are all set properly?

This is a code that functions with the same classes. It's probably easier to check that out if you are adding/removing the right classes.

Hopefully this helps you! I'm not sure but I have a feeling that it might be from some classes that have been missing from the HTML elements.

Cheers,

Rita

Rita Dias , our layout and menu are based on those created by the template and have almost no difference.

I have checked with a new auto-generated application and it worked good.

One major difference is that we don't have the "burger" menu button, we have menu opened by another button inside of the page. So I have returned the burger button to the header and this turned out to be the cause: activating the same menu from the header button works good, but when it's activated from our own button - we get this problem.

I will look into how I can apply the same classes to our own button without breaking the design.



Ok, I have simulated the template's MenuIcon component with empty divs with needed classes (app-menu-icon & app-menu-burger), added "display:none;" to the top one, and now it works smoothly!

Thanks, Rita, for showing the right direction.

That's great to hear! :)