[Bug]: Layout Functionality + Documentation

[Alexander-JM-0224]

Blazorise Version

1.7.5

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction or a simple code snippet

https://github.com/Alexander-JM-0224/BlazoriseTestANN

Steps to reproduce & bug description

Pull the project and run, in the MainLayout.razor are a couple of examples.

What is expected?

When reading your documentation there are 3 examples of Layouts that should be possible to use, but some (and especially the one we want to use) do not work as advertised.

Even in your Demo page.

What is actually happening?

We want for a frontend overhaul for our product to be able to change the layout. I looked at the documentation and "Sider with header on top" is exactly the layout we want. BUT when using the given example code the result is not satisfying. The Header goes underneath the Sider as seen in my included project, it is Example 1. (and also visible on your demo page)

So there are some problems here.

In my included project there are 3 examples of the MainLayout:

• The first is the one that gets closest to the result we want, the "Sider with header on top". But this one adds the height of the header to the rest of the page and makes it scrolling, its close to what we want but without the scrolling. (this one i made myself, but am stuck with the header height being added to the page)
• The second one is your example code, that just does not do what we want/what the picture in the documentation says it should be. (Example code for "Sider with header on top")
• The third example is a working one, that is correct with the documentation, i just put that one in there to make shure i did not mess something else up. ("With sider")

What browsers do you see the problem on?

Chrome, Safari, Brave

Any additional comments?

I'm not exactly shure what is going wrong here, seeing as the "Header with sider on top" is also broken in your demo envoirment i expect this to be a bug.
But also the lacking documentation makes it a bit hard to come up with a solution that works as intended.

So if it indeed is a bug, we would like it fixed offcourse, if it is my own lack of understanding of how the layout functionality should work i would really appreciate a quick explanation/(working)example.

Thanks in advance,
Alexander.

[stsrki]

Can you please make https://github.com/Alexander-JM-0224/BlazoriseTestANN public so that I can look at it?

[Alexander-JM-0224]

Can you please make https://github.com/Alexander-JM-0224/BlazoriseTestANN public so that I can look at it?

Shoot, forgot that. Should be public now!

[stsrki]

It seems like a bug in the Blazorise.Bootstrap5 version. We'll look into it.

[tesar-tech]

There are 3 kind of behaviors for "Sider with header on top".

• bs4, bs5, material, ant: that's what you described, header is on top, but the sider is on the top of that.

• bulma: the header is behaving as fixed, doesn't care about the rest of the elements at all (this is the most top I can scroll). The hamburger button is unreachable.

• tw, fluent: the right behavior (?) (tw has some issues here, but they are most likely unrelated)

So I guess the assignment is: "to make it behave as fluent is behaving" ?

[stsrki]

I would lie if I would say which is right. It has been years since I last worked on this feature. So, I would say the fluentUI version is the expected behavior.

[Alexander-JM-0224]

For me the Fluent screenshot is the behaviour i would expect for "Sider with header on top". BUT maybe the language suggests it should be on top/over the sider.
So maybe a change in langage would be appropiate by saying "Sider with header above/on top of page"?

[tesar-tech]

While fixing it, I realized there is also an issue with fix header footer only

the title is under the header. (with selected title it's barely visible)