[Bug]: Aspire 9.2 Template + Blazorise 1.7.5 / Material Design - Styling or Layout Issues

[Huntk23]

trafficstars

Blazorise Version

1.7.5

What Blazorise provider are you running on?

Material

Link to minimal reproduction or a simple code snippet

TestAspireBlazorise

Steps to reproduce & bug description

Issue 1

1. Run the application
2. Open the web application through the Aspire dashboard
3. You will see the Header overlaps the layout body

Issue 2

1. Looking beyond the first issue, I attempted the Blazorise.ThemeProvider wrapped around the Router with no luck. See: https://github.com/Huntk23/TestAspireBlazorise/blob/c012fa9cbe95b54eaa24b38b55be24a646c438f3/TestAspireBlazorise.Web/Components/Routes.razor#L1-L8

What is expected?

1. For the header to be fixed, like the footer and not allowing the body to clip under.
2. For the Blazorise.ThemeProvider to apply IsRounded = false

What is actually happening?

1. The body is clipping under the header
2. Blazorise.ThemeProvider is not applying any themes or colors I attempt

What browsers do you see the problem on?

Chrome, Microsoft Edge, Brave

Any additional comments?

Hey! I'm a huge fan of the framework and the outreach on Reddit! I used to be a big MudBlazor user pre .NET 8 and I've been out of the scene just over a year and a half from a life-threatening injury. I am back at it now and really sorry if some of these issues are with the new rendering modes in Blazor. I have done a crazy amount of research and documentation sprawling to fix my issue, with no luck.

I basically went through your installation instructions into a project, acting as if it was the .NET 8 "Web App" style with no luck. I feel like I am really close but just drowning in the proper usage and rendering order that Blazor does while working with these front-end frameworks. I am clueless to why some of these values and placements just don't work when following an example to the T. If you ask me what to look for, I will know where to go, but some of these front-end classes and styles are cryptic to me when they don't work the way you think they should.

Some more details of what I am seeing with the header overlap, or the body falls under the header:

Seeing the same classes applied on the example Material site but applied correctly(?):

My suspicion is something to do with InteractiveServerAuto mode which I would like to achieve. I would love some insight on this to get back into the technology stack and have a better understanding to also help support.

• My ultimate goal is that I would love to submit a possible application template combined with the newest Aspire template in the various modes it offers.

Thanks for this excellent library and for your time!

[Huntk23]

My issue might be somewhat related to #6069 - but my Blazorise.ThemeProvider is another issue.

[stsrki]

If I remember correctly, this used to happen a lot in the past due to a horizontal bar height requirement.

Try to add

--b-bar-horizontal-height: 100px;

somewhere into your app.css.

[Huntk23]

Thanks @stsrki - Sucks I didn't know about this or couldn't find anything on it.

1. I am still having a problem with the Blazorise.ThemeProvider applying themes or any setting at that. Is there a path to getting it to work with the Web App style?
2. Once I get this dialed in, are you interested in a PR for an Aspire/Blazorise template?

I am not sure why the ThemeManager is not changing colors of rounded borders but, the setting you suggested is applying correctly. Weird. I am going to keep experimenting.

private Theme _theme = new()
{
    IsRounded = false,
    BarOptions = new ThemeBarOptions
    {
        HorizontalHeight = "56px"
    }
};

[stsrki]

There must be something wrong with InteractiveServerAuto mode. I remember in the past I had the same problem when I tried to convert our website to use it. I was able to do it eventually, but stopped as I had to focus on outher stuff. So it's just sitting there for now.

You can see it in PR https://github.com/Megabit/Blazorise/pull/5091. Maybe it will help you by comparing what you have and what we did.

---

Once I get this dialed in, are you interested in a PR for an Aspire/Blazorise template?

We are always open to contributions. TBH I still haven't personally invested any time into learning Aspire. So if you happen to make I guess I will also have to do it :)

[Huntk23]

Sounds good! I am going to keep researching and hopefully provide good documentation and paths forward with this project type Aspire. I am unemployed and just want to commit my full time to this project at this point. Sorry if I am pestering or bugging you!

Thanks for PR #5091, it should give me some sort of guidance/path. I'll spend a couple days doing everything I can before I report back.

You have a couple issues that seem exciting to jump in and help expand it. I'm starring at #6053 !!!! - I love string parsing/manipulation/formatting/highlighting not using Regex.

But! - I want to make sure this template is prepared for Aspire. Microsoft is pushing it too much to ignore it. The old Blazor templates are slowly fading out... in my opinion.

[Huntk23]

I just realized, it doesn't look like I can make contributions to Blazorise.Templates

I am updating my public repo mentioned in the first comment. It should mimic Material Demo.

• [x] Aspire 9.2
• [x] Blazorise 1.7.6
  • [x] Material
• [x] InteractiveAuto
• [x] Web Project (Server Interactive Components)
• [x] Client Project (WASM Client Interactive Components)
• [x] API Project
• [ ] Full Copy of Blazorise Demo

NOTE: I found an annoying setting Microsoft Edge that messes with some theming options: Settings > Appearance > Try the new look and feel of Microsoft Edge

I am still working on a branch in my repo to attempt making a full working copy of the demo site using this new template. I don't feel like this is necessarily a bug anymore.