Sidebar truncating bottom of .main-content

[Frank]

I have a sidebar and the .main-content of the page is a div that has a border.  I use the border to demonstrate the problem.

When the .main-content contains just a few items the result is shown in the first pic below. Note that the border is shown around the entire div and the last line is "Welcome to your new app".  This is perfect.

When the main-content contains more than can be displayed on a page and the page has to be scrolled, the bottom of the .main-content is truncated.  The bottom border is not displayed. Here is what is displayed:

Notice that the bottom line as well as the bottom border is not displayed. 

Here is the code for my Index.razor

@page "/"

    <div class="wrapwithBorder">

        <h1>Hello, world!</h1>

        @for (int i = 0; i < 23; i++)

        {

            <div class="dummy">

                <p>This is a test @i</p>

            </div>

        }

        Welcome to your new app.

    </div>

    <style>

        .wrapwithBorder {

            border:solid 2px;

            margin-right:5px;

        }

        .dummy {

            margin-left: 200px;

            margin-bottom: 20px;

        }

    </style>

How can I fix this?

Thanks,

Frank

[Shalini Maragathavel]

Hi Frank, 

Greetings from Syncfusion support. 

Based on your query, we suspect that you are facing an issue with main content of the Sidebar. So we have prepared a Sidebar sample with the provided code snippet but unfortunately we are unable to reproduce it at our end as the main content of Sidebar is not truncated.  

We have attached our validated sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SIDEBA~1-313583339.zip 

Screenshot: 

 

If your reported problem persists, then please share the following information to validate further. 

• If possible, replicate your reported problem in the above sample or provide a simple sample to replicate the issue.
• Please ensure whether any custom CSS in your application affect the main content of the Sidebar.

Please get back to us if you need any further assistance with Sidebar component.  

Regards,  

Shalini M. 

[Frank]

Thanks for your help.  This was my css problem.

[Keerthana Rajendran]

Hi Frank, 

Most welcome. We are glad to hear that the provided suggestions helped you. Please get back to us if you need any further assistance. 

 

Regards, 

Keerthana R.