flyout | Flyout | Frontend Framework library

Previously I had .container-fluid.megamenusip {overflow-y: scroll} which worked until it didn't (it broke the menu open/close button).

In a mobile view how do I scroll through each mega menu?

If I add back .container-fluid.megamenusip {overflow-y: scroll} it doesn't resolve the issue.

The live site is here.

Help appreciated.

I'm trying to create a flyout header that displays the authenticated user's avatar and name in the FlyoutHeaderTemplate.

The issue I ran into is that it looks like OnAppearing() method is not invoked at all for AppShell. I put break points in that method and never hit it.

I also tried using a ContentView to display the header in my Flyout but turns out ContentView's don't have OnAppearing() or OnDisappearing() lifecycle events either.

How do I display authenticated user info in my flyout? I have the user info in my local database. All I need to do is:

1. Be able to call var user = await _dbService.GetUser(); to read user info
2. I also need to be able to bind to certain controls i.e. Label for username and Avatar for user image.

Here's what I have in my AppShell:

When creating a new Xamarin.Forms App with the template "flyout" I get the expected behaviour on my Android Simulator Android Simulator but the same code when deployed on my Iphone Simulator doesn't show the tab bar and the flyout. They still are there, meaning that if I press the screen where the tabs and the flyout should be, I get the expected behavoiur, but the screen doesn't show these items Iphone Simulator. I am using Visual Studio 2019, the Android Simulator is "Pixel 2 Pie 9.0 - API 28 (Android 9.0 - API 28)" while the Iphone Simulator is "Iphone 11 iOS 15.2"

Our mobile menu works fine in Chrome & Firefox on a Pixel 5.

On an iPhone 5s (the only iPhone I have), an iPad Mini 2 and on an older iPad, the burger menu open & close icons do not show.

On a non-retina desktop display where Chrome & Firefox work in responsive mode (mobile viewport width), Safari will show the mobile menu open icon, but not the close icon.

The open icon is three pipes rotated 90deg: |||

The close icon is a font-awesome symbol:

In a mobile viewport, from the menu, when you select 'Product', then scroll down and select 'Solution', the page does not automatically scroll back up to see Solution and the top of its mega menu.

I've tried adjusting the function showMenu(self) by adding:

In the demo below, when in a mobile viewport <=768px I do the following:

1. Click on Product, to open Product's mega menu.
2. Scroll down, and click on Resources.
3. I expect Product's mega menu to close, and Resource's mega menu to open.
4. What happens is Product's mega menu closes, but Resource's mega menu doesn't open.

The problem doesn't exist working in the reverse order, i.e. opening Resource's mega menu first, then clicking on Product to close Resource's mega menu, and opening Product's mega menu (this works fine).

I've considered if an element is overlapping the correct item and preventing the right element from being clicked - I don't think this is the case.

You'll need to click the burger menu @ top right to see what happens.

Help appreciated.

I want to create a Xamarin App that contains 3 pages AboutPage, Page1, Page2. The 3 page are grouped using FlyoutItem as follows:

As the question states I am trying to add a toolbar item/button to shell for adding a database item. Normally in Xamarin forms I was able to add a toolbar item with

I'm working on a project that uses pre-made TailwindUI component code. If you refer to this gif, you can see that the code on the site is responsive to mobile design and the hamburger menu toggles on button click.

However, the code given for this does not include the necessary JS, so the toggling of the hamburger menu does not work. I am trying to fix this, this is what i've done so far:

1. I've wrapped the flyout menu code in a div and gave it an id 'mobile-menu' and a state of 'hidden'. Inside this menu is the X button, which i gave an id 'menu-toggle' since i want this button and the hamburger button to toggle the flyout menu. Below is not the whole code but just the relevant parts