Dialog's floating buttons keep overlapping

Question

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%;
}

Answer 1

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.