V9 form background colour with scrolling

1

With version 9, if i have a long form with scrolling, the background colour stops at the bottom of the screen and the remaining background is black.

I’ve change the form background colour to white, and also the Project Properties background colour.

Appreciate any help, thanks

2

This is at runtime, right?

Can you make a small sample which demonstrates this?

3

Yes, this is at runtime.

It can be seen using the HelloWorld sample on a device. To see this, make the form long, and put the button down the form.

Thanks

4

Just tried that here. I need a little more information exactly how to reproduce this. Can you give me a step by step?

5

Ok.

  1. Using HelloWorld example, make the form height/ designHeight 1400
  2. Enable form scrolling
  3. For Button1, set the top to 1200
  4. Make form background colour red
  5. Run it on phone. Anything below the normal screen size is black, not red

Thanks

6

Thank you! I’m able to reproduce this now.

We are working on this now.

7

Ah! You need to set the screenmode property to Actual Size:

From the Help window:

How will the form be displayed?

Full Screen using full width and height.
Actual Size of width, height, left and top. Use for Modal forms.
Center in screen, using width and height.
Zoom width and height to screen size and center horizontally. Max of 2.
noStyle Only user styling applied to form.

More Info…

8

If i set the screen mode to Actual Size, the app screen doesn’t fit the phone screen size properly, and it’s still black below the normal screen size after scrolling down.

This problem is only visible on a device, not from browser.

Thanks

9

This has been an issue for a very long time. I overcome this with the following:

  • enableAppScroll = False
  • Form1 screenMode: Full Screen
  • Project Properties > viewportFit: cover

For each Form I ended up using a container and put everything inside that and set the Container,
Position Left: 0px, Width 100%, Top:40px (my header is 40px).

In the Style properties of the Container: overflow-y:scroll;

Function Form1_onshow() 
  Container1.height = window.innerHeight - Header1.height;
End function 

Function Form1_onresize()
  Form1_onShow();
End function

If the issue still persists, set the background-color of the container to the colour you require.

10

I have today found that the background color of the section of screen which is only shown when the app scrolls is set by:

@media (prefers-color-scheme: light)
html   
background: white;
color: black;
}

To fix it I added this in my css:

html {
 background: grey;
}
11

Update: If you use transparent then the color will be as you set.

html {
 background-color: transparent;
}
12

Thanks. I haven’t look on the forum for some time.
I tried your last suggestion and it works fines.

Thank you