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,
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
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
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.
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
Ivan, from your explanation, we understood that menu item popup overlaps with speed Dial text like the below screenshot.
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.
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
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.
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.
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.