Corrupt header in app designer

[Zack_S_]

I have created the same project several times and each time a corrupted header and footer appears in the mainpage at some point. I am assuming it is a header/footer. I am unable to establish what causes this. Has anyone experienced something similar?My mainpage(index) comprises of 2 rows with 4 columns in the second row. These second row has 8 image buttons that I use for navigation to 8 sub pages. The code (functions and features) used I then insert between the sub pages div's. This all works fine except for this weird header (half blue half white) header and footer. You cannot delete this header and footer from the app designer nor could I identify a line in code that could possible create this.

I am attaching an example of these headers/footers. The mainpage did not have a header or footer prior to this happening. Note that this 'corruption' and I can only assume that it is a corruption, only appears at some point as I switch between code, design and emulator modes. Another lead may be that if I then drag and drop a header onto the mainpage in designer, the hew header is place over the 'corrupted' header. The new header is then not displayed, however, but the 'corrupted' header leaves a gap, almost like a placeholder in emulator mode.

rgs Zack

[Chris_P_Intel]

There are a couple of things that are likely happening.  They will be fixed in the upcoming bug-fix release of the XDK.  

1 - Double inclusion of App Framework CSS/JS.

Take a look at the source code, you should see the following files in the HEAD. Each should be there _once_ (not twice). 

• af.ui.min.css
• icons.min.css
• appframework.js
• appframework.ui.js

In the case of a newer project, the link should be for App Framework 2.1, and will look something like this: app_framework/2.1/appframework.ui.js  .      For an older project (App Framework 2.0), it might look like this: app_framework/appframework.ui.js

But if you see those files linked in twice each, it means they are linking in both AF2.1 and AF2, and that is the problem. For an AF2.1 project remove the 2.0 links.  And make sure the appframework.ui.js link looks like this (with a data-ver attribute):

<script type="application/javascript" src="app_framework/2.1/appframework.ui.js" data-ver="1"></script>

For an older AF2 project, just remove the 2.1 links.

2 - missing data-header/data-footer attribute on page. 

<div class="upage vertical-col panel" id="mainpage" data-header="af-header-0" data-footer="none">

Each page div must have a data-header and data-footer attribute.  Even if no header or footer is present.  

[phil_J_]

I've just started to use the Designer - and I get the same as described above. I took out the duplicate lines and left just the 2.1...BUT - every time I drag an element across onto the form they are put back and the corrupt header reappears....

Also notice that the elements available in the controls are different to those in some of the tutorials - eg No Grid control, only a Card Grid ??

Any ideas.

[Chris_P_Intel]

The "Grid" was renamed as "Button Grid", and a new "Card Grid" introduced as well.

I'm not sure why you would be seeing the problem described above. Try making a new project and inserting some AF controls into it.