We have developed a mobile app for our customer and on several screens we use the interaction/floatingactions. We want the 'main' button of this widget to be on the bottom of the screen (it's aplaced in the bottom bar area) but on several screens it's not on the bottom, it can be placed lower. How can we make the 'main' button be placed lower? I think it wil be a CSS thing for the 

SyntaxEditor Code Snippet

"floating-button"

could you please help?

I have checked https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Traditional_Web_Patterns/Controls/FloatingActions as well as the other posts but cannot solve this. 

Sorry I did not add an example for it's a customers own app....



I have also checked https://www.outsystems.com/forums/discussion/49664/mobile-floating-action-position-issue/ but 

.floating-actions-icon {
    margin-bottom: 100px;
}

did not work. 


Solution

Hi,

You might have to play around following css classes, please note that you might need to add !important while overriding them. I could get the floating button touch the bottom by changing these:


.floating-actions-wrapper.bottom-bar-exists {
    bottom: 60px;
} 

.iphonex .floating-actions-wrapper.bottom-bar-exists {
    bottom: calc(var(--os-safe-area-bottom) + 60px);
}
Solution

Akshay Puri wrote:

Hi,

You might have to play around following css classes, please note that you might need to add !important while overriding them. I could get the floating button touch the bottom by changing these:


.floating-actions-wrapper.bottom-bar-exists {
    bottom: 60px;
} 

.iphonex .floating-actions-wrapper.bottom-bar-exists {
    bottom: calc(var(--os-safe-area-bottom) + 60px);
}

thank you very much for your response, I will try this asap!


Ineke de Raaf wrote:

Akshay Puri wrote:

Hi,

You might have to play around following css classes, please note that you might need to add !important while overriding them. I could get the floating button touch the bottom by changing these:


.floating-actions-wrapper.bottom-bar-exists {
    bottom: 60px;
} 

.iphonex .floating-actions-wrapper.bottom-bar-exists {
    bottom: calc(var(--os-safe-area-bottom) + 60px);
}

thank you very much for your response, I will try this asap!

Akshay Puri ! thank you ! it works, does the iphonex line also change the android?