Dialog's floating button remains overlaping-CodePudding

Hi I am building a Maui blazor application and I have a full page size Dialog which has a floating button. When the dialog is closed and go back the original page, on the original page there is a dead area exactly where the dialog's button was (On the dialog I change the visibility of that button based on a condition). This style I am 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%);
}

update: I changed the css of the floating button now there is no dead area but the position is not good.:

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

CodePudding user response：

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

One way is to set visibility to hidden. Then HTML elements will hide but keep the space where that element is located.

Another way is to set display to none. In this condition, HTML Elements hides but does not preserve the space in which that element resides.

So, you can try to use display and set the value of it to none.

CodePudding user response：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: FabExample(),
    );
  }
}

class FabExample extends StatelessWidget {
  const FabExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FloatingActionButton Sample'),
      ),
      body: const Center(child: Text('Press the button below!')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Add your onPressed code here!
        },
        backgroundColor: Colors.green,
        child: const Icon(Icons.navigation),
      ),
    );
  }
}