Mobile floating action position issue

Hi There,

In a mobile application, I'm using the floating action from the OutSystemsUIMobile patterns and it appears on top of the bottom bar (it is located in the main content not in the bottom bar). I have tried to move it up using the suggestions from the documentation:

https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Web_Patterns/Controls/FloatingActions#Change_FloatingActions_position

but it doesn't work. I ended up removing the bottom bar but this is not ideal so if anyone has found a way to move it up I would appreciate if you can tell me how.

Regards,


Lorena 

Hello,

Give it a try with this CSS:

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

You might have to adjust the 100px value depending on how your screen is built. Also, be aware that this doesn't seem to work when you preview the app in the browser, but it should work in an actual device.

Hi Aurelio,

Thanks for your answer. I have tried that before and it does work in service studio (the floating actions gets moved higher up). However, when I open the mobile app in the mobile then the floating action is on top of the bottom bar.

Thanks

Hi,

That's strange, I've tested on my iPhone and it does work:

What device did you test this on and where exactly did you put the CSS (screen, theme, etc)?

Aurelio Junior wrote:

Hi,

That's strange, I've tested on my iPhone and it does work:

What device did you test this on and where exactly did you put the CSS (screen, theme, etc)?

Hi Aurelio,

I tested it using on my IPhone and I added the CSS on the screen style sheet.

Thanks