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.
Hi, when I use SidebarType.Auto the sidebar dont push de @body content, if I select a wrong Target, the push works but the over dont work in small screens, will push, I inspect the class and both has the right class e-push or e-over
this is all my code in MainLayout:
<AuthorizeView>
<Authorized>
<div class="header">
<SfToolbar Height="100%">
<ToolbarEvents Clicked="ToolBarButtonClick"/>
<ToolbarItems>
<ToolbarItem Id="Sidebar" Text="Uma Uñas" PrefixIcon="e-icons e-menu" CssClass="e-custom" Align="ItemAlign.Left">
</ToolbarItem>
<ToolbarItem Align="@ItemAlign.Center">
<Template>
<div class="page-name">@CurrentPage</div>
</Template>
</ToolbarItem>
<ToolbarItem Id="Settings" PrefixIcon="e-icons e-settings" Align="ItemAlign.Right" />
</ToolbarItems>
</SfToolbar>
</div>
<div class="main">
<div class="content mb-3">@Body</div>
</div>
<SfSidebar Width="160px" @bind-IsOpen="SidebarToggle" Target=".content mb-3" Type="SidebarType.Auto" HtmlAttributes="HtmlAttribute">
<ChildContent>
<SfListView DataSource="@List" TValue="@SideBarPages" CssClass="template-list" ShowIcon="true">
<ListViewFieldSettings TValue="@SideBarPages" Id="Id" Text="Text" IconCss="Icon" />
<ListViewEvents TValue="SideBarPages" Clicked="OnSelect" />
</SfListView>
</ChildContent>
</SfSidebar>
</Authorized>
<NotAuthorized>
<Login />
</NotAuthorized>
</AuthorizeView>
<style>
.default-sidebar {
z-index: 999 !important;
position: fixed !important;
top: 50px !important;
left: 0 !important;
bottom: 0 !important;
}
.header {
z-index: 1000 !important;
height: 50px !important;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.content {
margin-top: 50px !important;
padding: 0 !important;
}
.page-name {
font-size: 20px;
align-content: center;
}
.list-wrapper {
display: inline-flex;
width: 100%;
padding-bottom: 100px;
}
.template-list {
border: none !important;
}
.template-list .list-item {
line-height: 1.5;
}
.e-text-content .e-icons {
line-height: 1.4 !important;
margin: 0 !important;
font-size: 1rem;
vertical-align: central !important;
}
.e-list-text {
font-size: 1rem;
vertical-align: central !important;
}
.e-control e-btn e-lib e-tbar-btn e-tbtn-txt :active {
background-color: inherit !important;
}
.e-toolbar-center {
margin-left: auto !important;
}
.e-toolbar .e-tbar-btn:focus {
background-color: inherit !important;
}
body {
background-color: rgb(248,249,250) !important;
}
</style>
@code {
private string CurrentPage = "Home";
private SidebarPosition Position { get; set; } = SidebarPosition.Left;
private bool SidebarToggle = false;
Dictionary<string, object> HtmlAttribute = new Dictionary<string, object>()
{
{ "class", "default-sidebar" }
};
private List<SideBarPages> List = new List<SideBarPages> {
new SideBarPages { Id = "1", Text = "Inicio", Icon = "e-icons e-home", Link = "/"},
new SideBarPages { Id = "2", Text = "Ventas", Icon = "e-icons e-description", Link = "/Sales"},
new SideBarPages { Id = "3", Text = "Turnos", Icon = "e-icons e-clock", Link = "/Counter"},
new SideBarPages { Id = "4", Text = "Resumen", Icon = "e-icons e-border-custom", Link = "/Counter"},
new SideBarPages { Id = "5", Text = "Productos", Icon = "e-icons e-field-settings", Link = "/Product"},
new SideBarPages { Id = "6", Text = "Servicios", Icon = "e-icons e-field-settings", Link = "/Counter"},
new SideBarPages { Id = "7", Text = "Cursos", Icon = "e-icons e-field-settings", Link = "/Counter"},
new SideBarPages { Id = "8", Text = "Clientes", Icon = "e-icons e-people", Link = "/Counter"},
new SideBarPages { Id = "9", Text = "Gastos", Icon = "e-icons e-protect-workbook", Link = "/Counter"}
};
private void ToolBarButtonClick(ClickEventArgs args)
{
if (args.Item.Id == "Sidebar")
{
SidebarToggle = !SidebarToggle;
}
}
public void OnSelect(ClickEventArgs<SideBarPages> args)
{
CurrentPage = args.ItemData.Text;
NavManager.NavigateTo(args.ItemData.Link);
}
}
this is the SideBarPages class
public class SideBarPages
{
public string Id { get; set; } = string.Empty;
public string Text { get; set; } = string.Empty;
public string Icon { get; set; } = string.Empty;
public string Link { get; set; } = string.Empty;
}
Hi Luis,
Greetings from Syncfusion support.
Currently, we are validating the reported query in the Blazor Sidebar component by preparing a sample like your shared codes. This issue occurs specific to your code, so we need some additional time to analyze the issue and will update you with further details on or before October 11, 2022.
We appreciate your patience
Regards,
Prasanth Madhaiyan.
Hi Luis,
Thanks for your patience.
From the shared details, we understand that you are facing an issue with the Blazor Sidebar component while setting the Type property as auto, which will not push the main content. We have checked the reported issue in the Sidebar component, and we were able to replicate the reported issue with the shared code details.
On our further validation, the reported issue occurs due to an incorrect Target value(".content mb-3") in the Sidebar component. To overcome the issue, we suggest you set the Target property as ".content" from your side. You need to map a single class name to the Target property. We have attached the modified sample to your reference.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1930999042.zip
Please check the shared sample and get back to us if you need any further assistance.
Regards,
Sivakumar S
the main issue persist in your example, the sidebar push but when the device screen is smaller, the sidebar still Push but should be set to Over; I think that was the point of using Auto
Hi Luis,
We have validated the reported issue in the Blazor Sidebar component and considered it a bug on our end. The fix for this issue will be included in our weekly patch release on October 25, 2022. You can track the status of the issue fix using the following feedback link.
Feedback link: https://www.syncfusion.com/feedback/38446/blazor-sidebar-auto-type-is-not-working-properly-on-mobile-devices
Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.
We appreciate your patience.
Regards,
Sivakumar S
Hi Luis,
Thanks for your patience.
We are glad to announce that our patch release (V20.3.52) has been rolled out successfully. The issue with “Blazor Sidebar Auto Type is not working properly on mobile devices" has been resolved in this release. To access this fix, we suggest you update the package to 20.3.52.
sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication11595585568.zip
Release notes: https://blazor.syncfusion.com/documentation/release-notes/20.3.52?type=all#sidebar
Please let us know if you need any further assistance.
Regards,
Sivakumar S
This is again not working in Version 22.2.12
Hi Luis,
We have reviewed your query and understand that the reported issue in the Sidebar component is still persisted in the version 22.2.12. We have prepared Sidebar sample in version 22.2.12 and conducted tests on our end. We were unable to replicate the reported issue.
we have attached video recordings detailing the tests we conducted. Additionally, we have included a sample for your reference.
If the issue still persists on your end, We suggest you to share the code snippet details related to the Sidebar component or if possible please share the video recordings that replicates the issue. These details will help us to validate your query further and provide you with a prompt solution.
Regards,
Suresh.
