We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Speed Dial and Menu in HamburgerMode

Hi,

I'm trying to use on the same page an SfMenu in HamburgerMode and an SfSpeedDial.

In order to have correct positioning of the Speed Dial's button I set positioning of its container to relative:

<div id="home-page" style="height: 100%; width: 100%; position: relative;">

This makes the Menu unusable because it overlaps with the SpeedDial container.


This happens if position is not relative



Can you please help me understand what am I doing wrong?


Thank you in advance!


Best regards,




7 Replies 1 reply marked as answer

NV Navin Vinayagam Syncfusion Team November 18, 2022 08:19 AM

Hi Ivan,


We checked the reported scenario based on the provided details, but the sample worked as expected.

We have attached the sample for your reference, where we rendered the speed dial and the hamburger menu inside a container element with relative position.

The speed dial items will have an absolute position if a target is provided, so the target container should have a relative position. If the target doesn't have a relative position then the speed dial items won't be positioned correctly as shared by you.

You have mentioned that the menu becomes unusable, could you provide more details regarding this issue like code snippets, screenshots, and if possible an issue reproducing sample to check the issue from our end and update you with the details?


Regards,

Navin V


Attachment: SyncfusionBlazorApp_de153837.zip


IT Ivan Temelkov November 18, 2022 10:23 AM

Hello,

thank you very much for your reply!

I checked your example, and I should say that my setup is a bit different.

I don't have the Menu and the SpeedDial inside the same container.

My Menu is in the "top-row".

Another thing that I believe is important is that I'm working on a mobile WebApp so my width is like 340px.

Modifying your example, I was able to replicate the issue that I cannot solve.

Please use the browser's DevTools (I test on Chrome) to and enable the Device Toolbar in order to be able to set the width to 340px.


Do you have any suggestions?


Thank you in advance!


Best regards,

Ivan




Attachment: SpeedDialWithHamburger_f8b7c3d0.zip


YA YuvanShankar Arunagiri Syncfusion Team November 21, 2022 10:52 AM

Ivan, please remove the below highlight CSS style to resolve this issue.

[MainLayout.razor.css]:

.top-row {

    background-color: #f7f7f7;

    border-bottom: 1px solid #d6d5d5;

    justify-content: flex-end;

    height: 3.5rem;

    display: flex;

    align-items: center;

}


If you still facing the issue, please share the video demonstration of issue replication.



IT Ivan Temelkov November 21, 2022 12:44 PM

Hello,

as you suggested I recorded a video. Please note the device size.

First, I left the "top-row" class unchanged because I'd like the menu to be on the right.

[MainLayout.razor.css]:

.top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

Please see the video called session_1.mkv that corresponds to this setup.


Then I tied to delete the flex settings as you suggested:

.top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;

    height: 3.5rem;

    align-items: center;
}

In this case, please see the video called session_2.mkv.


It seems that the problem is rather Menu related than SpeedDial related.

Any other suggestions?


Best regards,

Ivan




Attachment: demo_d3acb833.zip


YA YuvanShankar Arunagiri Syncfusion Team November 22, 2022 08:19 AM

Ivan, from your explanation, we understood that menu item popup overlaps with speed Dial text like the below screenshot.

Graphical user interface, application

Description automatically generated

Please use the below CSS style to overcome this issue.

[MainLayout.razor]:

<style>

    .e-menu.e-menu-parent {

        z-index: 1 !important;

    }

</style>


Please get back to us if you need further assistance.



IT Ivan Temelkov November 22, 2022 09:11 AM

Hi,

at the end I did something similar (using z-index).

I created an overlay that covers the rest of the screen and has the menu and its items on top of it.

This gave me the possibility to add click handler to the overlay and use it as an alternative to close the menu. Using only the menu button for closing it is not User Friendly enough in my opinion.

Putting the close alternative apart, I'd say that somehow, I expected the menu component to work out of the box, without "magic" css tweaks.

Best regards,

Ivan



Marked as answer

YA YuvanShankar Arunagiri Syncfusion Team December 5, 2022 06:02 AM

Sorry for the delay, Ivan.

We will resolve the overlap issue of the menu popup in the upcoming volume 4 release. And regarding the Hamburger Mode behavior of the menu, clicking on the menu icon is the only way to open and close the menu popup. It is the correct behavior of the menu. You can refer to the below link.


Online link: https://www.w3schools.com/howto/howto_js_mobile_navbar.asp


Please get back to us if you need any assistance on this.



Loader.
Live Chat Icon For mobile
Up arrow icon