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,




8 Replies 1 reply marked as answer

NV Navin Vinayagam Syncfusion Team November 18, 2022 01:19 PM UTC

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 03:23 PM UTC

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 03:52 PM UTC

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 05:44 PM UTC

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 01:19 PM UTC

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 02:11 PM UTC

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 11:02 AM UTC

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.




YA YuvanShankar Arunagiri Syncfusion Team January 3, 2023 09:41 AM UTC

Sorry for the delay, Ivan.


We are glad to announce that our Essential Studio 2022 Volume 4 release v20.4.0.38 is rolled out and included the fix (overlap issue of the menu popup) in this release and is available for download under the following link.


https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download


Please update your Syncfusion package to latest version and remove the below style form your sample.


[Index.razor]:

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


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.


Loader.
Live Chat Icon For mobile
Up arrow icon