Side bar height not 100%

[Ben Junior]

Using the examples and documentation I was able to place a Responsive Sidebar with Treeview  inside the MainLayout.razor  and it works as expected except for the fact that there is scroll bar for the sidebar height and I can't remove it.

@inherits LayoutComponentBase

@using Syncfusion.Blazor.Navigations

<div id="wrapper" style="width:100%;height:100%">

    <!--header-section  declaration -->

    <div class="main-header" id="header-section">

        <ul class="header-list">

            <li class="float-left header-style icon-menu" id="hamburger" @onclick="@Toggle"></li>

            <li class="float-left header-style nav-pane"><b>Navigation Pane</b></li>

            <li class="header-style float-right support border-left"><b>Support</b></li>

        </ul>

    </div>

    <!-- end of header-section -->

    <!-- sidebar element declaration -->

    <SfSidebar HtmlAttributes="@HtmlAttribute" Width="290px" Target=".main-content" @ref="Sidebar" MediaQuery="(min-width:600px)">

        <ChildContent>

            <div class="main-menu">

                <div class="table-content">

                    <input type="text" placeholder="Search..." class="search-icon">

                    <p class="main-menu-header">TABLE OF CONTENTS</p>

                </div>

                <div>

                    <SfTreeView CssClass="main-treeview" @ref="TreeView" ExpandOn="@Expand" TValue="TreeData">

                        <TreeViewFieldsSettings Id="nodeId" Text="nodeText" IconCss="iconCss" DataSource="treedata" HasChildren="hasChild" ParentID="pid">

                        </TreeViewFieldsSettings>

                    </SfTreeView>

                </div>

            </div>

        </ChildContent>

    </SfSidebar>

    <!-- end of sidebar element -->

    <!-- main content declaration -->

    <div class="main-content" id="maintext">

        <div class="content">

            @Body

        </div>

    </div>

    <!--end of main content declaration -->

</div>

Attachment: MainLayout_528560c8.zip

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Cid,  

 

Greetings from Syncfusion Support. 

 

We have checked your reported problem with Sidebar. The scroll bar for Sidebar element will appear when the height of total inner elements of Sidebar exceeds its actual height. Also, we would like to let you know that by default height for Sidebar element will be added based on the height of it main-content element’s height. 

 

We suspect that total height of the Sidebar’s inner elements must be higher than the height of the main content element. To resolve this issue, you can set the height of the main content element to adapt the full screen dimension.  

 

In the following code sample, we have applied styles to position the Sidebar and header element as fixed. This makes the Sidebar to render with height as 100% to adapt the full screen height. 

 

#header-section.main-header { 

        border-bottom: 1px solid #d2d6de; 

        height: 55px; 

        width: 100%; 

        min-height: 55px; 

        max-height: 55px;        background: #1c86c8; 

        color: #fff; 

        position: fixed; 

} 

 

 .e-sidebar{  

        top:50px !important;  

        position:fixed;  

    }  

 

 

For your convenience, we have attached a sample with above code which will help you to achieve your expected requirement with Sidebar in your application. 

 

Refer the below sample link, 

 

https://www.syncfusion.com/downloads/support/directtrac/153610/ze/Sidebar_blazor_sample1158171649 

Please, check out the following links to know more about SF Blazor Sidebar. 

  

Demos: https://blazor.syncfusion.com/demos/sidebar/default-functionalities?theme=bootstrap4  

  

Documentation: https://blazor.syncfusion.com/documentation/sidebar  

  

API Reference: https://ej2.syncfusion.com/documentation/api/sidebar/  

  

Please let us know if you need any further assistance. 

Regards, 

Shameer Ali Baig S. 

[Frangoudes Panikos]

Good Morning Shameer

I am having the same situation as Ben Junior 

I would like to download the sample you provided as below to which I have not access.

(For your convenience, we have attached a sample with above code which will help you to achieve your expected requirement with Sidebar in your application. 

 

Refer the below sample link, 

 https://www.syncfusion.com/downloads/support/directtrac/153610/ze/Sidebar_blazor_sample1158171649 

)

Thank you in advance

Best regards

Panikos Grangoudes

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Frangoudes, 

 

Thanks for contacting Syncfusion support. 

 

We have modified the sample link for your convenience. Now, you can download the solution sample from the following link. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SIDEBA~11686362006  

 

Please, let us know if you need any assistance on using Blazor Sidebar in your application. We will be happy to assist you. 

 

Regards, 

Shameer Ali Baig S.   

[Frangoudes Panikos]

Thank you Shameer for your prompt reply

Best Regards

Panikos Frangoudes

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Frangoudes, 

 

Welcome. Please, let us know if you any further assistance. 

 

Regards, 

Shameer Ali Baig S. 

[Soon Hua Khor]

Hi,

By following the above sample ( https://www.syncfusion.com/downloads/support/directtrac/general/ze/SIDEBA~11686362006), i was able to get the SfSidebar up and running.

However, if i turn on the "ShowBackdrop", it seem like the content area is not shown in 100% height which looks a bit odd. May i know is there a way i can make the content area display in full height?

Additionally, may i know from where i can find the list of available icon for SfTreeView so that i could switch to the icon that suit my menu item?

Many thanks.

Regards,

Khor

[Shalini Maragathavel]

Hi Khor, 

Greetings from Syncfusion support.

Query#1: if i turn on the "ShowBackdrop", it seem like the content area is not shown in 100% height which looks a bit odd. 

                                                                                                                                         

Based on your query, we suspect that you are facing the issue in main content height of Sidebar while enabling ShowBackdrop property. But we are unable to reproduce the reported issue at our end as height of the main-content element is set properly (100%) and the height for Sidebar element is set properly based on the height of its main-content element. We have recorded a video and attached in the below link for reference.

Video demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sidebar_height362444792.zip

If we have misunderstood your query, please elaborate on your requirement in detail with video demonstration(if possible) in order to understand it better. So that we can check from our end and provide the prompt solution.

Query#2: may i know from where i can find the list of available icon for SfTreeView so that i could switch to the icon that suit my menu item?

We have validated your query and you can change the icons by setting the required icon value in the content property .

Please check the below link for details on our icons library for various icons. 

 

Icons: https://blazor.syncfusion.com/documentation/appearance/icons/ 

Please refer to the below code snippet, 

@code { 

    protected override void OnInitialized() 

    { 

        base.OnInitialized(); 

        treedata.Add(new TreeData { nodeId = "01", nodeText = "Installation", iconCss = "install e-icons" }); 

        treedata.Add(new TreeData { nodeId = "02", nodeText = "Deployment", iconCss = "deploy e-icons" }); 

        treedata.Add(new TreeData { nodeId = "03", nodeText = "Quick Start", iconCss = "quick e-icons" }); 

        treedata.Add(new TreeData { nodeId = "04", nodeText = "Components", iconCss = "components e-icons", hasChild = true }); 

        treedata.Add(new TreeData { nodeId = "04-01", nodeText = "Calendar", iconCss = "components e-icons", pid = "04" }); 

        

    } 

} 

<style>

.sidebar-treeview .main-treeview .install::before { 

content: '\e424'; 

} 

 

.sidebar-treeview .main-treeview .deploy::before { 

  content: '\e7a3';  

  } 

 

.sidebar-treeview .main-treeview .quick::before { 

content: '\e848' 

} 

 

.sidebar-treeview .main-treeview .components::before {  

content: '\e930' 

} 

Screenshot: 

Please find the below sample for your reference. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sidebar_blazor_sample-1436295678.zip 

Please get back to us if you need further assistance. 

Regards,   

Shalini M. 

[Soon Hua Khor]

Hi  Shalini,

Thanks for the icons library, It is exactly what i looking for.

As for query 1, please refer to below screen before toggle the sidebar. The main content area seem display in full height now.

However, once sidebar is being toggled. Seem only upper part is being "covered" by the backdrop?

Regards,

Khor

[KINS]

As per above code, Can anyone share example for content page which should be responsive when browser is resized or viewed in mobile.

[Shalini Maragathavel]

Hi Ahmed, 

Thanks for the update.

Query#1: once sidebar is being toggled. Seem only upper part is being "covered" by the backdrop?

We have validated your query. To overcome the reported issue, we suggest you to set the min-height property to the Sidebar main content as demonstrated in the below code snippet, 

 

<style> 

    #main-text .sidebar-content { 

        padding: 15px; 

        height:90vh; 

    } 

<\style> 

Screenshot:



Note: The min height value in the above sample has to be modified based on your application to meet your required height. 

Please find the below sample for your reference, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sidebar_-Treeview-1954339175.zip

Query#2: Can anyone share example for content page which should be responsive when browser is resized or viewed in mobile.

Based on your query, we could understand that your requirement is to make the Sidebar responsive. You can achieve your requirement by using the MediaQuery property. The MediaQuery allows you to set the Sidebar in an expanded state or collapsed state only in user-defined resolution. Please refer to the below code snippet, 

<SfSidebar HtmlAttributes="@HtmlAttribute" Width="290px" Target=".main-content" @ref="Sidebar" MediaQuery="(min-width:600px)"> 

        <ChildContent>
                    
       . . . . 

        </ChildContent> 

    </SfSidebar> 

Documentation: https://blazor.syncfusion.com/documentation/sidebar/auto-close 

Demo: https://blazor.syncfusion.com/demos/sidebar/panel-with-responsive?theme=bootstrap4 

Please let us know if you need further assistance. 

Regards, 

Shalini M. 

[KINS]

still issue in content page.

please check my comments in below video

https://www.screencast.com/t/ruWtlrJKt

Attachment: Sidebar_Treeview_464eacfe.zip

[Soon Hua Khor]

Hi Shalini,

Referring to query 1 (Once sidebar is being toggled. Seem only upper part is being "covered" by the backdrop), may i know is there a way to make the height automatically fit the screen?

Reason being different user may have different screen size (some use big monitor, some use smaller tablet), by setting the height/ min-height manually, it will fit in some device.

Regards,

Khor

[Shalini Maragathavel]

Hi Soon Hua Khor, 

Thanks for the update.

Query#1: Space in the left side of Sidebar
  

We checked your issue in the provided sample and would like to let you know that the extra space in the left and right side of the Sidebar is due to some overriding CSS. To resolve the reported issue, we suggest you to apply the below CSS in your application. 

Index.razor 

<style> 

 #wrapper .col-lg-12.col-sm-12.col-md-12 { 

        padding: 0px; 

    }
</style> 

Query #2: may i know is there a way to make the height automatically fit the screen? 

  

We checked your query and suspect that the contents(image and button) in the main content of Sidebar gets overlapped while resizing the window. To resolve the overlapping issue, we suggest you to apply the required styles to the main content of Sidebar based on your scenario. 

Please get back to us if you need any further assistance with Syncfusion components.  

 
Regards,  

Shalini M. 

[Hari Krishnan]

Hi,

When i downloaded sample code "SIDEBA_11686362006". the version of Syncfusion.Blazor - 18.1.0.54

which is the code for expand menu that works perfect. that has

public ExpandOnSettings Expand = ExpandOnSettings.Click;

When upgraded to 20.1.0.61 sample code then" ExpandOnSettings " no more works, alternate " ExpandAction ".

After change the code as per the same " Example of Responsive Panel in Blazor Sidebar Component" as per

https://blazor.syncfusion.com/demos/sidebar/panel-with-responsive?_gl=1*28t0qz*_ga*Njc3NzAzMjUzLjE2MzExMzA3MTY.*_ga_WC4JKKPHH0*MTY1NjM0MzA4Ny42Ny4xLjE2NTYzNDMxOTguMA..&_ga=2.90548442.1728770848.1656283039-677703253.1631130716

Menu is overlapping the main content. you ca see he screenshot attached

Thanks

Hari

Attachment: Sidebar_Issue_b699546b.zip

[Indhumathy Loganathan]

Hi Hari,

We have updated your previous shared sample to the latest version (20.1.61) to render the Sidebar component. As mentioned, you need to use ExpandAction to expand the nodes based on click. However, we are unable to reproduce the issue you are reporting with the Sidebar overlapping the main content on our end. Please see the link below for the latest updated sample.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/BLAZOR~1868276200

Whether have you set Type property as over for the Sidebar component? If the issue still persists, reproduce the issue in the shared sample to further validate the issue.

Regards,

Indhumathy L