0

I have developed a Cordova hybrid app with Telerik Appbuilder and it is working on all platforms, Android, iOS and Windows Phone 8.1. But when I start the app on a windows 10 device the buttons and tabstrip are not shown correctly.

Here are pictures of what it looks like on Windows Phone 8.1: enter image description here

Here is what it looks like on my Windows 10 device: enter image description here

As you can see, the text in the buttons isn't centered and there is this white arrow-like icon on the tabstrip buttons.

Furthermore, I can't build and deploy my app to the Windows 10 device. I always get the following error:

Build and Deploy: 'Unable to build and deploy KBS.InsectFinder on one or more devices. For more information, see the log.'
Error when installing the app. A runtime error has occured. Correct the Capabilities-Values in the file "WMAppManifest.xml".

My question is, how must I build the app so it works correctly on a Windows 10 device?

Here is the code of the tabstrip:

<div data-role="footer">
   <div data-role="tabstrip" id="tabstrip" data-select="onSelect">
      <a href="views/home.html" id="homeTabstrip">Home</a>
      <a href="views/Settings.html" id="settingsTabstrip">Einstellungen</a>
   </div>
</div>

And the CSS:

#tabstrip .km-icon {
   background-repeat:no-repeat;
   -webkit-background-clip: border-box;
   background-size: 100% 100%;
}

#homeTabstrip.km-state-active span.km-icon {
    background-image: url("../../Images/Icons/home_active.png");
}

#homeTabstrip .km-icon {
    background-image: url("../../Images/Icons/home_inactive.png");

}

#settingsTabstrip.km-state-active span.km-icon {
    background-image: url("../../Images/Icons/gearwheel_active.png");
}

#settingsTabstrip .km-icon {
    background-image: url("../../Images/Icons/gearwheel_inactive.png");

}

And here is the code for the buttons:

<button data-role="button" id="login" style="margin-left: 15px; width: 200px;">Abschicken</button>

<div style="margin-left: 15px;">
   <b>Synchronisation</b> <br />

   <button data-role="button" id="syncButton" style="width: 200px;">Synchronisation</button> <br />
</div>  
adryr
  • 140
  • 2
  • 14
  • Could you please post some codes or share a demo that can reproduce the problem? – Elvis Xia - MSFT Sep 30 '16 at 01:42
  • @ElvisXia-MSFT I don't know what is causing the problem. The code works perfectly fine on every platform except for Windows 10. I suppose I could post the code of the tabstrip and the buttons. – adryr Sep 30 '16 at 07:13

0 Answers0