black background between header and list

black background between header and list

  

Hi,

On mobile app on IOS (I did not test it on Android), when I scroll down a list and the the list is on the start I get a black background between the list and the HeaderContent.

I've made several tests and it seems that this only happen when using a List -> webBlock -> ListItem -> ListItemContent and in the ListItemContent on onde of the placeholders there is more than one container.

Has anyone saw this before?

I attached a print screen for better understanding.

Thanks,

JP

Hello Joao,

Most of times I saw this type of thing, it was a CSS problem.

Please, inspect your page in browser (using mobile preview). You will be able to identify the element that is causing this.

Cheers

Eduardo Jauch

Hi Eduardo,

I can't reproduce this on the browser because the list doesn't have this behaviour. Dont scroll down when is at the beginning of the list.

JP

Hi Joao,

Yes, it only occurs on IOS and it's fancy scroll :D

It seems that it's a regular problem, as you can see here or here.

Since I don't know how to change the webview background-color I would go and set the higher class with background-color :#fff; 

Perhaps afecting the background color of the classes 'screen' or 'screen-container' does the trick.

Hope it works

Hum...

I hope OutSystems is working to solve this, because have different behavior on something that is "basic", just because its a "different device" is really annoying... xD

P.S. But I understand that this is no easy task, keep up to date with all the different devices and their makers and their will to do everything out of standard... :P

Thanks, Henrique :)

Cheers,
Eduardo Jauch

Hello Guys,


I'm a newbie to Outsystems, but i think you can target specific browsers in css, maybe the css in outsystems is targeting safari somewhere? 

Cheers,
Jose Torrão

Hi Henrique,

I've applied the backgroung css class to the higher classes but not luck.

Anyone was able to fix this?

Thanks,

JP

Hi Joao,

I have one last try, perhaps changing the color of the body does the trick, something like the below code:

body {

   background-color: #FF00FF;

}

Otherwise only going native with a plugin for that.

Let me know if it worked 

Cheers,

Hi,

I face this issue also, and it is really annoying. Hope Outsystems fix the SilkUI framework.

I just tried to set .screen background-color to #fff;

actually, to all levels of container:

SyntaxEditor Code Snippet

html, 
body,
#reactContainer, 
#reactContainer > div, 
#reactContainer > div > div,
.layout-blank,
.layout-blank .content,
.screen,
.main-content,
.content,
.layout,
.menu-background {
    background-color: #fff;
}


it works for a while, and I don't know the issue still appears for scrolled screen.

please let me know if someone has the solution for this.

thank you


Regards

Stephanie M


Hi,

I am also facing this issues, but none of your solutions is working out for me...

Any ideas? Does anyone know if OutSystems is working to solve this issue?

Thanks,

Maria