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.
BoldSignA modern eSignature application with affordable pricing. Sign up today for unlimited document usage!
I want the sidebar to move the main content and when the window is on a mobile view the content should be hidden from the sidebar. As I understand it, it is automatically set as default behavior. But it does not work for me. I also tried to force it with: Type="SidebarType.Auto" but that didn't work either. The sidebar always pushes the content away. Here is my Code:
NavMenu Code
@inject MIPLATONavigationManager NavigationManager
<SfSidebar Width="260px" Type="SidebarType.Auto" Target=".maincontent" Position="SidebarPosition.Left" @bind-IsOpen="IsOpen" MediaQuery="(min-width: 800px)">
<ChildContent>
<SfTreeView TValue="NavigationTreeData">
<TreeViewEvents TValue="NavigationTreeData" NodeSelecting="BeforeSelect" NodeSelected="OnSelect"></TreeViewEvents>
<TreeViewFieldsSettings Id="Id" Text="Name" Selected="IsSelected" ParentID="ParentId" HasChildren="HasChild" Expanded="IsExpanded" DataSource="@NavTreeData"></TreeViewFieldsSettings>
</SfTreeView>
</ChildContent>
</SfSidebar>
@code {
[Parameter]
public bool IsOpen { get; set; } = true;
public List<NavigationTreeData> NavTreeData { get; set; } = new List<NavigationTreeData>();
public void Toggle(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.TooltipText == "Menu")
{
IsOpen = !IsOpen;
}
}
public void BeforeSelect(NodeSelectEventArgs args)
{
if (args.NodeData.HasChildren)
{
args.Cancel = true;
}
}
public void OnSelect(NodeSelectEventArgs args)
{
string id = args.NodeData.Id;
var ntd = NavTreeData.Where(i => i.Id == id).Single();
if (!String.IsNullOrEmpty(ntd.Url))
NavigationManager.NavigateTo(ntd.Url);
StateHasChanged();
}
protected override void OnInitialized()
{
// TODO Navigation must reflect permission assignment
NavTreeData.Add(new NavigationTreeData() { Id = "InfoObject", Name = "Information Objects", HasChild = false, IsExpanded = false, IsSelected = false, Url = "/InfoObject" });
NavTreeData.Add(new NavigationTreeData() { Id = "MobileUser", Name = "Mobile Users", HasChild = false, IsExpanded = false, IsSelected = false, Url = "/MobileUser" });
NavTreeData.Add(new NavigationTreeData() { Id = "Admin", Name = "Administration", HasChild = true, IsExpanded = false, IsSelected = false });
NavTreeData.Add(new NavigationTreeData() { Id = "Pool", Name = "Pools", HasChild = false, IsExpanded = false, IsSelected = false, ParentId = "Admin", Url = "/Pool" });
NavTreeData.Add(new NavigationTreeData() { Id = "FilterDefinition", Name = "Filter Definitions", HasChild = false, IsExpanded = false, IsSelected = false, ParentId = "Admin", Url = "/FilterDefinition" });
NavTreeData.Add(new NavigationTreeData() { Id = "PropertyDefinition", Name = "Property Definitions", HasChild = false, IsExpanded = false, IsSelected = false, ParentId = "Admin", Url = "/PropertyDefinition" });
NavTreeData.Add(new NavigationTreeData() { Id = "Category", Name = "Category", HasChild = false, IsExpanded = false, IsSelected = false, ParentId = "Admin", Url = "/Category" });
NavTreeData.Add(new NavigationTreeData() { Id = "Language", Name = "Languages", HasChild = false, IsExpanded = false, IsSelected = false, ParentId = "Admin", Url = "/Language" });
NavTreeData.Add(new NavigationTreeData() { Id = "UserRole", Name = "Users and Roles", HasChild = true, IsExpanded = false, IsSelected = false, ParentId = "Admin" });
NavTreeData.Add(new NavigationTreeData() { Id = "User", Name = "User", HasChild = false, IsExpanded = false, IsSelected = false, ParentId = "UserRole", Url = "/BackendUser" });
NavTreeData.Add(new NavigationTreeData() { Id = "Role", Name = "Role", HasChild = false, IsExpanded = false, IsSelected = false, ParentId = "UserRole", Url = "/Role" });
NavTreeData.Add(new NavigationTreeData() { Id = "Permission", Name = "Permission", HasChild = false, IsExpanded = false, IsSelected = false, ParentId = "UserRole", Url = "/Permission" });
}
public class NavigationTreeData
{
public string Id { get; set; }
public string ParentId { get; set; }
public string Name { get; set; }
public bool HasChild { get; set; }
public bool IsExpanded { get; set; }
public bool IsSelected { get; set; }
public string Url { get; set; }
}
}
MainLayout Code:
@inherits LayoutComponentBase
<PageTitle>Comneos.MIPLATO.Server.Portal</PageTitle>
<SfToolbar CssClass="defaultToolbar">
<ToolbarEvents Clicked="@ToolbarClicked"></ToolbarEvents>
<ToolbarItems>
<ToolbarItem PrefixIcon="e-icons e-menu" TooltipText="Menu"></ToolbarItem>
<ToolbarItem>
<Template>
<div class="e-folder">
<div class="e-folder-name">MIPLATO</div>
</div>
</Template>
</ToolbarItem>
<ToolbarItem Align="@ItemAlign.Right">
<Template>
<div>
<LoginDisplay />
</div>
</Template>
</ToolbarItem>
</ToolbarItems>
</SfToolbar>
<NavMenu IsOpen="@NavBarIsOpen" />
<main class="maincontent">
<div class="content">@Body</div>
</main>
@code {
public bool NavBarIsOpen { get; set; } = true;
public void ToolbarClicked(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
NavBarIsOpen = !NavBarIsOpen;
}
}
Can you help me? Let me know if you need anything else
Hi Artur,
Greetings from Syncfusion support.
Based on your shared details and code snippet, we understand
that you are facing an issue in mobile mode with the "Auto"
type property in the Sidebar component. We checked on our end, and we suggested
you refresh the browser once you have switched to mobile mode. For your
reference, we have attached a sample.
If refreshing the browser does not resolve the issue, please share a replicated sample or video footage of the issue with us. This will help us validate your query more efficiently and provide further assistance.
Check out the shared details and get back to us if you need any further assistance.
Regards,
Suresh.
Dear Syncfusion-Team,
Refreshing the browser works. The sidebar obscures the content. The problem I still have is that the sidebar moves the content. It should not do that in the mobile view.
Best Regards.
Artur
Artur, We have reviewed your query and understand that you are experiencing Sidebar overlapping issue in mobile mode of the Sidebar component. We have prepared a sample for you that includes a resize invoke method to programmatically refresh the browser when you change the browser to mobile mode. This will help you to achieve your desired outcome. Refer to the below code snippet for further reference.
Code Snippet :
|
[MianLayout.razor]
@using Microsoft.JSInterop @inject IJSRuntime JsRuntime
....
@code { protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { // Add an event listener to the "resize" event await JsRuntime.InvokeVoidAsync("addEventListener", "resize", DotNetObjectReference.Create(this)); } } }
|
|
[_Host.cshtml]
<script> window.addEventListener('resize', function() { if (window.innerWidth <= 768) { // To refresh the browser location.reload(); } }); </script>
|
Check out the attached sample and get back to us if you need any further assistance.
Regards,
Suresh.
Hello Dear Syncfusion Team,
that's a cool feature I can use but not what I meant. I'll send you a video. There you can see that in the normal view the main content is moved from the sidebar. That's fine. But it shouldn't be like that in the mobile view. The sidebar should cover the main content and not move it. Otherwise the main content is much too small. The main content should not be moved in the mobile view. This is what I want. Can you help me ?
Best regards
Artur
Artur, We have achieved your exact requirement in our previous shared sample through customization. To resolve the issue, we have customized our Sidebar component by making an interop call.
We have run our previous shared sample and have attached a video reference for your reference. We suggest you try out our shared sample at your end, and if the issue persists, get back to us with a replicated sample of the issue.
Regards,
Suresh.
Dear Syncfusion-Team,
I had a css bug. I have fixed it. Now it works as it should. Thank you for your help.
Best regards
Artur
