MediaQueryList not working in layout but worked in a certain page

[cylixlee]

Hi Ed, I'm creating a Blazor Web App using Interactive SSR and Per page / component rendering. I want my home page different from other pages so I created another Layout and uses the two layouts in my app.

But when I place the MediaQueryList in any one or both the layout file, it just throws an exception saying MediaQueryList is null and doesn't work. I tried the App.razor file and even Routes.razor, too.

Magically, when I tried to put it right in the only page I'm using media queries, it magically worked. The code is below:

@page "/a"
@rendermode InteractiveServer

<MediaQueryList>
    <h1>Title</h1>
    <p>Paragraph</p>

    <MediaQuery Media="@Breakpoints.MediumUp">
        <Matched>
            Medium up!
        </Matched>
        <Unmatched>
            Medium down...
        </Unmatched>
    </MediaQuery>
</MediaQueryList>

PS: due to the per page / component rendering, @rendermode is needed

The problem appears, and disappears, but I don't know why... Since I've tried to use media query like this (put MediaQueryList and MediaQuery in one file) in other pages, and it works well, I was wondering if MediaQuery works as long as they're wrapped by a MediaQueryList ?

Is there any possible consequences like memory leaking or something?

[cylixlee]

Oh, I forgot a very important point: I'm using .NET 8, and I downloaded your example BlazorSize.ExampleNet6 and run it locally, and it didn't work! There is no more information but a "An unhandled error occurred".

I'm wondering if the .NET 8 has something new and break your example?

[martingagne]

I am facing the same issue. @EdCharbeneau - We need your help! :)

[EdCharbeneau]

Sorry for any delays in making updates to BlazorSize. I've been busy working on new content as an author.

I have not tried working with BlazorSize on .NET 8. The .NET team did a fantastic job adding new features in .NET 8 like server side pre-rendering, and Auto mode. However, these modes do not work with interactive components, and JavaScript interop. BlazorSize utilizes both JS and .NET code to work, and plugs into the complete lifecycle of a component. The short of it is, it's not compatible.

So what do we do:

1. I cannot stress this enough, BlazorSize is for making runtime (interactive mode) media queries to solve problems that can only be addressed programmatically. Ex: Showing a completely different UI component based on screen size. Ex2: Changing the record count, so 10 records are fetched on mobile vs. 1000 on desktop. In all other cases a standard CSS media query should be used, you can accomplish quite a bit with CSS alone.

2. BlazorSize will only work with global interactive scenarios.

3. MediaQuery must be side an in-scope MediaQueryList. MediaQueryList is the cascading service provider for the MediaQuery component. If you are using the per-page/component interactive mode, this means every page must be wrapped in a MediaQueryList before a MediaQuery is used.

This is the best I can do in the short term. While .NET 8 is fantastic, it forces us to rethink how components are implemented and utilized.

[EdCharbeneau]

A preview will be available shortly at: https://www.nuget.org/packages/BlazorPro.BlazorSize/8.0.0-preview

Be sure to enable preview bits in NuGet package manager.

Note: BlazorSize still requires an interactive mode.