Forum | Appery.io

I want to add to the top of the header so the status bar doesn't overlap with it. How should I add 20px to the top with CSS?

Hi Ellen,

You try following:

1. Add new CSS asset.

2. Use following CSS code for it:

   pre

   [data-role="header"]{
   margin-top: 20px;
   }

   /pre

   Regards.

That code just shifted the header down 20px. That didn't work because the page contents is visible when you scroll. Would it be possible to add a color to it for example #FEFEFE so that it isn't transparent?

Hi Ellen,

Yes, you can add some absolute bar do it with following way:

1. Open your app start page.

2. Add "Page load" event handler with action "Run javascript".

3. Populate it with following JS code:

   pre

   var barHTML = '';

   var barElement = jQuery(barHTML);

   jQuery("body").append(barElement);

   /pre

   Regards.

That didn't do anything.

Sorry, code should be:

precode

var barHTML = '<div style="position: fixed; top: 0; left: 0; right: 0; height: 20px; background: #eee; z-index: 1000"><>';

var barElement = jQuery(barHTML);

jQuery("body")&#46;append(barElement);

/code/pre

Regards.

Thanks. I used that along with the first CSS you provided and it worked!

I spoke too soon. With both included, I get two 20px places. With only the JS, it goes on top and overlaps the header. With only the CSS, page contents can be seen. Any other suggestions??

Hi Ellen,

Your problem is not clear for this time..

Show us some screen shots to clarify it.

Regards.

Here is the picture. Notice that there is something weird with the status bar.