0
230
VisualizaçõesFloating Action Button not sticked to its parent element
I'm using Material UI v4 libraries to build a React Js app.
I create a custom Floating Action Button (FAB) component.
The FAB component (the red box in the picture below) must be sticked to the bottom right (with some margins) of its parent element which is the Flyout component (the blue box in the picture below).
The Fylout component has some children inside of it. They are the title, the Content component (sample Card component from Material UI), and the FAB component.
The Flyout component must have an absolute position and be scrollable (scroll: 'auto') for its root element because of some reason (I couldn't mention them here).
I use absolute position for the FAB component. The result is fine (when the Card is not expanded) as seen in the screenshot below:
But when the Card component is expanded and we scroll the Flyout component, the FAB component is not sticked more from its parent as seen in the screenshot below:
I tried to use position: 'sticky' for the FAB component with bottom: 20 and right: 20, but the FAB is not sticked to the bottom right of the Flyout component as seen in the screenshot below:
So my question is how to make the FAB button sticked only to the bottom right of the Flyout component?
Here is the simplified code: https://codesandbox.io/s/fab-stick-to-parent-w5ng3
1 Respostas
Responde à pergunta0
Since I don't have enough reputation to comment, I have to make this an answer.
Replacing position: absolute; with position: fixed; worked for me.
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
Final code:
makeStyles-addButton-9 {
right: 40px;
bottom: 40px;
position: fixed;
}