Overlay

[ma-lar]

How to display overlay only over a certain div? It seem to expand and hide all my page. I would like to avoid it over my header and over my navmeny. Any idea how I could achieve this? When I tried similar libraries I had to put code inside loading tag and loading appeared only over this and didn't expand to take whole page like fluentui-blazor.

[vnbaaij]

Hi @ma-lar,

Welcome from the Discord side. It is probably easier to help you if you show us some code that you have tried.

Have you already looked at the examples on the demo site?

[ma-lar]

Hi @vnbaaij,
I tried with this code below and when LoadingService.IsLoading is true overlay is over the whole site but I would like it to be only over my body. I have read your examples but I can't get it to stay over a specific section like your samples.

@inject LoadingService LoadingService

<FluentLayout>
    <FluentDesignTheme Mode="DesignThemeModes.Light" CustomColor="#127869"/>
    <FluentHeader>
        Gestion du certificat
    </FluentHeader>
    <FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%">
        <NavMenu/>
        <FluentBodyContent Class="body-content">
            <FluentOverlay Visible="@LoadingService.IsLoading" Opacity="0.4" Dismissable="false"
                           Alignment="Align.Center"
                           Justification="JustifyContent.Center">
                <FluentProgressRing/>
            </FluentOverlay>

            <div class="content">
                <FluentMessageBarProvider/>
                        @Body
            </div>
        </FluentBodyContent>
    </FluentStack>
</FluentLayout>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

<FluentToastProvider/>
<FluentDialogProvider/>
<FluentTooltipProvider/>
<FluentMenuProvider/>```

[vnbaaij]

What if you move the FluentOverlay inside the <div class="content">?

[ma-lar]

Inside the what? I moved in under FluentMessageBarProvider inside the div class="content"> and the result is the same.

[vnbaaij]

Impossible to tell with this. Can you create a minimal repo that shows the issue? I cant run the posted code as I don't have the LoadingService and would need to create a new project, etc.

[ma-lar]

I added position: relative to class .body-content and it now work. The inset on fluent-overlay is set to 0 so parent element had to have a position set. This can be marked as solved! Thanks for your help!