0
225
VistasBotón de acción flotante no adherido a su elemento principal
Estoy usando las bibliotecas Material UI v4 para crear una aplicación React Js.
Creo un componente de botón de acción flotante (FAB) personalizado.
El componente FAB (el cuadro rojo en la imagen a continuación) debe pegarse en la parte inferior derecha (con algunos márgenes) de su elemento principal, que es el componente Flyout (el cuadro azul en la imagen a continuación).
El componente Fylout tiene algunos niños dentro. Son el título, el componente de contenido (componente de tarjeta de muestra de Material UI) y el componente FAB.
El componente Flyout debe tener una absolute position y ser desplazable ( scroll: 'auto' ) para su elemento raíz por alguna razón (no podría mencionarlos aquí).
Uso absolute position para el componente FAB. El resultado está bien (cuando la Tarjeta no está expandida) como se ve en la siguiente captura de pantalla:
Pero cuando el componente Tarjeta se expande y desplazamos el componente Flyout, el componente FAB no se pega más a su padre, como se ve en la siguiente captura de pantalla:
Traté de usar position: 'sticky' para el componente FAB con bottom: 20 y right: 20 , pero FAB no está adherido a la parte inferior derecha del componente Flyout como se ve en la siguiente captura de pantalla:
Entonces, mi pregunta es cómo hacer que el botón FAB se pegue solo en la parte inferior derecha del componente Flyout .
Aquí está el código simplificado: https://codesandbox.io/s/fab-stick-to-parent-w5ng3
1 Respuestas
Responde la pregunta0
Como no tengo suficiente reputación para comentar, tengo que hacer de esto una respuesta.
position: absolute; con position: fixed; trabajó para mi.
Un elemento con position: fixed; se coloca en relación con la ventana gráfica, lo que significa que siempre permanece en el mismo lugar, incluso si se desplaza la página.
Código definitivo:
makeStyles-addButton-9 { right: 40px; bottom: 40px; position: fixed; }