1

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

Martin Michaelsen
  • 125
  • 1
  • 6

1 Answers1

0

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;
}
SoggyHedgehoggy
  • 111
  • 2
  • 7
  • The stars around z-index are simply to highlight where it should go – SoggyHedgehoggy Aug 07 '20 at 19:55
  • 1
    Thanks a bundle. That worked like a charm after I forced a reload:-) Thanks again:-) – Martin Michaelsen Aug 11 '20 at 15:53
  • Happy to help! I suppose as well it would be worth noting that if for some reason you want a component to render above the login bar, you would have to set that component's z-index to be greater than the top-row one, however, I can't seem to think of a scenario where that would be desired :) – SoggyHedgehoggy Aug 11 '20 at 16:09