1. Home
  2. Forum
  3. Blazor
  4. Side bar height not 100%

Side bar height not 100%

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

15 Replies
SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team April 24, 2020 11:01 AM UTC

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, 
 
Please, check out the following links to know more about SF Blazor Sidebar. 
  
  
  
  
Please let us know if you need any further assistance. 
Regards, 
Shameer Ali Baig S. 


FP Frangoudes Panikos May 29, 2020 09:42 AM UTC

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. 
)

Thank you in advance
Best regards

Panikos Grangoudes


SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team May 29, 2020 10:52 AM UTC

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. 
 
 
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.   


FP Frangoudes Panikos May 29, 2020 12:23 PM UTC

Thank you Shameer for your prompt reply

Best Regards
Panikos Frangoudes

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team May 29, 2020 01:24 PM UTC

Hi Frangoudes, 
 
Welcome. Please, let us know if you any further assistance. 
 
Regards, 
Shameer Ali Baig S. 


SH Soon Hua Khor August 12, 2021 12:57 AM UTC

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?

ShowBackdrop Turn On.png

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



SM Shalini Maragathavel Syncfusion Team August 12, 2021 11:44 AM UTC

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. 
 

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. 

Please get back to us if you need further assistance. 
Regards,   
Shalini M. 


SH Soon Hua Khor August 12, 2021 03:18 PM UTC

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.

Before Toggle.png


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

After Toggle.png


Regards,

Khor




KI KINS August 12, 2021 04:53 PM UTC

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


SM Shalini Maragathavel Syncfusion Team August 13, 2021 12:06 PM UTC

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> 
Please let us know if you need further assistance. 

Regards, 
Shalini M. 



KI KINS August 13, 2021 01:25 PM UTC

still issue in content page.

please check my comments in below video

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



Attachment: Sidebar_Treeview_464eacfe.zip

SH Soon Hua Khor August 13, 2021 01:41 PM UTC

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


SM Shalini Maragathavel Syncfusion Team August 16, 2021 11:38 AM UTC

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. 


HK Hari Krishnan June 27, 2022 05:48 PM UTC

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


IL Indhumathy Loganathan Syncfusion Team June 28, 2022 01:35 PM UTC

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


Loader.
Up arrow icon