Dialog's floating buttons keep overlapping
P粉032977207
P粉032977207 2024-03-22 08:20:59
0
1
374

Hi, I'm building a Maui blazor app and I have a full page size dialog with a floating button in it. When the dialog is closed and returned to the original page, on the original page there is a dead space where the dialog button is (on the dialog I change the visibility of the button based on a condition). The style I'm using for the floating button:

.center {
    bottom: 5%;
    z-index: 999;
    cursor: pointer;
    margin: 0;
    position: fixed;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

renew: I modified the css of the floating button. Now there is no dead space, but the position is not good:

.center {
    bottom: 5%;
    cursor: pointer;
    margin: 0;
    left:50%;
}

P粉032977207
P粉032977207

reply all(1)
P粉567112391

There are two ways to set whether an element is visible.

One way is to set visibility to hidden. The HTML element will then be hidden, but the space it occupied will be preserved.

Another method is to set display to none. In this case, the HTML element is hidden but the space in which it resides is not preserved.

So, you can try using display and set its value to none.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template