Form background colour

1

Hi,

In project properties, if i set the background colour to red, then in my first form that loads, i change the background colour to green, when the screen is rotated, the bottom part of the screen is still red when it should be all green.

Is there a way to fix this?

Thanks

2

Is this iOS or Android?

I recall something about a bug in iOS which caused this.

3

I am using Android with app scrolling.

4

Wrap the form in a div and then style the div.

5

Thank you for your reply.

How is that achieved in AppStudio as i’ve no experience with html using it?

Thanks

6

If you’re gonna do this, you’ll have to learn html and css. Get one of the dummies books and or take the free lessons on w3Schools.

To get you started, your form you should already have (why else be working on the background color if you don’t have a working form?) should be easy to wrap with a div like this:

    <div class="myform">
      <form>
        <input> 
        <button>
      </form>
    </div>

Then you just style it by adding the appropriate css like this:

.myform { background-color: blue; border: 1px solid black;}
7

Thanks. I’ll have a look into this when i have a moment.

But right now, i have this issue that needs to be sorted as soon as possible. With app scrolling enabled and project background colour set to red (for example), when i use below when the form loads
frmMain.style.backgroundColor = “white”

the background colour is white (as is should be) then as the form is scrolled down, it is still red in the bit that was hidden by the scroll.

Any help is greatly appreciated.

8

@pedau:

Could you make a small project which reproduces this? It will make it much easier for me to look at the exact issue you’re having problems with.

@PPetree:

AppStudio projects automatically get an outer div with id=“NSBPage”. The background property for the project sets the style of that div.
Forms are also divs, with an id of the form name. The background property for the form sets the style of that div.

9

As below. You will see that after the button is pressed, the background colour below the screen size when scrolling down is still red.

FormBackgroundColour.zip (222.3 KB)

Thanks.

10

Thanks - just what I needed. A few points:

  1. The height of Form1 was set to 700px. When you change the color of the form to red, it only applies to the actual area of the form. When you scroll, you go past the 700 and the green background beneath the form shows.

  2. You had both ‘enableAppScroll’ in Project Properties and ‘scrolling’ in Form properties set. You only need one of these - I recommend enableAppScroll.

  3. With ‘enableAppScroll’ set, change the height of Form1 to 100%. It will then be the full height.

  4. When you have ‘enableAppScroll’, you’ll only be able to scroll if there is content. To test, add another button to your app with a top of 1500. It will be off screen - you will be able to scroll to it.

  5. Lastly, we recommend using the Bootstrap 4 controls. jQuery Mobile has not been updated in years and we will be deprecating it in the future.

11

Thanks.

  1. Ok. If i scroll down, is there are way to also update the background colour beneath the form?

  2. Ok.

  3. Ok.

  4. Ok.

  5. Ok. Is jqWidgets safe for now?

12

If you track user behavior you’ll find they typically only scroll down a form to see how much work they have to do (to determine if the work is worth the reward). Changing background colors isn’t conducive to engaging the user.

Most developers switch to a panel/widget format for long forms.

13

@pedau,

  1. If you follow the suggestions, the whole area will be colored. The problem will go away.

  2. Definitely. The jqWidgets team is working hard on new features and bug fixes. It’s a solid product.