Blazor EditForm goes over MainLayout when scrolling

Question

I have this Blazor WASM with a MainLayout top with a logo and other things. On a child form I have an Editform this work OK, but when I scroll the page the EditForm scrolls on top of the MainForm instead of under. The other content in the child scroll fine under. Any ideas? Kind regards

Answer 1

When you say MainForm - do you mean the top bar on the screen? If so, go into your site.css and add z-index:9999; to your .main .top-row section. it should look similar to this:

.main {
    flex: 1;
}

.main .top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    **z-index: 9999;**
}

    .main .top-row > a, .main .top-row .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

.main .top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}