Sidebar truncating bottom of .main-content
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
Greetings from Syncfusion support.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SIDEBA~1-313583339.zip
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.
