Site Settings dialog always scrolling to bottom of body

[coderdnewbie]

I am trying to implement the site settings dialog and it works fine apart from the body scroll always being activated. I am hoping someone else knows the solution to resolve this issue. I have tried the css from the demo site and it is also doing this behavior, but works when the demo site is run.

This is what the page looks like before I click the site settings button (the body has a scroll bar):

This is what it looks like when I press the site settings dialog. The body has scrolled to the bottom of the page (this is the unwanted behavior):

This is what it looks like when I close the site settings dialog:

I am now at the bottom of the page and have to manually scroll to the top.

What am I doing wrong?

Here is some of the css on my site:

@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

body {
--body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
font-family: var(--body-font);
font-size: var(--type-ramp-base-font-size);
line-height: var(--type-ramp-base-line-height);
margin: 0;
}

.navmenu-icon {
display: none;
}

.main {
min-height: calc(100dvh - 86px);
color: var(--neutral-foreground-rest);
align-items: stretch !important;
background: var(--neutral-layer-1);
}

.body-content {
align-self: stretch;
height: unset !important;
display: flex;
}

.content {
padding: 0.5rem 1.5rem;
align-self: stretch !important;
width: 100dvw;
}

.manage {
width: 100dvw;
}

[dvoituron]

Did you tried to apply this body style: https://www.fluentui-blazor.net/DesignTheme

body {
    margin: 0;
    padding: 0;
    height: 100vh;    👈
    font-family: var(--body-font);
    font-size:   var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    font-weight: var(--font-weight);
    color:       var(--neutral-foreground-rest);
    background:  var(--neutral-fill-layer-rest);
}

[coderdnewbie]

Putting height: 100vh; did not make a difference. I am not sure why it is not working, but I will probably have to do this whole exercise again, once dotnet 9.0 is released in November.

What I am attempting is getting blazor fluentui and tailwind to work together (including theming). I had a theory that I could do this using css variables and this has worked successfully, and so i am able to use the basic design system from blazor fluentui, but add the extra effects that I can do in tailwind, and so produce a very professional looking site. This was just done for fun as there are few actual blazor jobs in the UK,

Another thing I could only get to partially work is AOS.js (animation on scroll), so there are still challenges for me to explore.

On a more positive note I have a new job that I will be starting in a couple of weeks, so will be focusing my efforts on that for the immediate future. Thanks for your help.

Does anyone know any other thing I can try to resolve this issue? If not, I will probably close it in the next 14 days.

[coderdnewbie]

I found out something interesting .. in my v 4.7.2 of the site, the behaviour works. However after upgrading to 4.9 it then exhibits the behaviour as described above. Was there any change between these two versions that could have caused the problematic behaviour?

[coderdnewbie]

I could not work out why I am getting the incorrect behaviour described above. I will give up until Dotnet 9.0 and start again, with the dotnet 9.0 templates, hopefully they are imprvements over the dotnet 8.0 templates and there will be versions of the CRUD templates that use fluentui. I am closing this as I cannot resolve.

[dvoituron]

@coderdnewbie If you're using other CSS styles like tailwind.
Check out this PR #2255 where you probably need to disable some of the CSS checking we do.

builder.Services.AddFluentUIComponents(options =>
{
    options.ValidateClassNames = false;
});

[coderdnewbie]

Thanks for your suggestions @dvoituron I have just solved this issue.

The tailwind css I have implemented uses tw- prefix and does not interfere with blazor fluentui CSS in any way, so min-h-[16px] becomes tw-min-h-[16px] or bg-[#ff0000] becomes tw-bg-[#ff0000], for example. I have both working really well together, and I don't need to disable CSS checking.

I have just solved the problem I described above.

My css was missing the following line, in the .body-content section: height: calc(100dvh - 86px) !important;

My body-content css now looks like this:

.body-content {
    align-self: stretch;
    height: calc(100dvh - 86px) !important;
    display: flex;
}

Here is a screenshot of it working (and the scroll position is still the middle of the page):

Thanks again for your help. I have solved getting tailwind fully working, especially getting tailwind to use Fluentui theming, Steve Sanderson uses tailwind with Blazor in some of his demos, so I thought it would be an interesting challenge to make it work with FluentUI.

My next challenge is getting Animation on scroll (AOS) to work. I have made some progress on getting this to work.