identify the display by code

[drma-tech]

<Select TValue="Region" SelectedValue="@Settings.Region" SelectedValueChanged="RegionValueChanged" Size="Size.Small" Style="width:auto;" Margin="Margin.Is2.FromEnd" Display="Display.InlineBlock.OnMobile.None.OnTablet">
    @foreach (var item in Regions.OrderBy(o => o.Name))
    {
        <SelectItem Value="@item.ValueObject">@(((Region)item.ValueObject).GetCustomAttribute(false).Name)</SelectItem>
    }
</Select>
<Select TValue="Region" SelectedValue="@Settings.Region" SelectedValueChanged="RegionValueChanged" Size="Size.Small" Style="width:auto;" Margin="Margin.Is2.FromEnd" Display="Display.InlineBlock.OnTablet.None.OnMobile">
    @foreach (var item in Regions.OrderBy(o => o.Name))
    {
        <SelectItem Value="@item.ValueObject">@item.Name</SelectItem>
    }
</Select>

the problem is: it keeps rendering and the code keeps processing. there is no way to access this display by code, so use the blazor pattern? @if (display == ...) {} with that, I avoid processing this component, instead of just hiding it.

[David-Moreira]

Hmm it took me a while to figure out what you wanted, maybe what you want is to figure out what media breakpoint is currently set? If tablet do smthg if mobile etc... @stsrki do we have any feature or helper for this? Well other then the Fluent builders ofc

[drma-tech]

that's right.

[stsrki]

The only way to not process the component is to have it behind the if statement. Other than that, if you want a more declarative approach then try the @mrpmorris https://github.com/mrpmorris/Morris.Blazor.ControlFlow

[drma-tech]

but how is it possible to use Display with this component?

my intention is to identify the breakpoint in the code.

[stsrki]

Do you mean to know the actual state of the Display? That is not possible. It is one directional. We just transform the Display utility to CSS class names and from there it's up to the Bootstrap CSS to handle it.

[Jimmys20]

This library might help: https://github.com/EdCharbeneau/BlazorSize

[drma-tech]

Do you mean to know the actual state of the Display? That is not possible. It is one directional. We just transform the Display utility to CSS class names and from there it's up to the Bootstrap CSS to handle it.

So, I was thinking about the following: if at some point you capture this information, you could store it in some public property.

[stsrki]

We have it on backlog #3607

[drma-tech]

This library might help: https://github.com/EdCharbeneau/BlazorSize

thanks. I will test this.

[drma-tech]

It works beautifully.

@stsrki you can be inspired by the code of this component to work on this backlog.