Declaration of <!DOCTYPE html> does not work wi

2019-07-22 17:11发布

问题:

I am a beginner in using IBM MobileFirst with Ionic to build hybrid mobile apps. Currently, I am able to build and run my application in the MobileFirst Console simulator, emulator, as well as in an Android mobile device. However, all these can work well only when I remove the declaration of <!DOCTYPE html>. If <!DOCTYPE html> is included, ion-nav-view does not work.

I referred to the Ionic-based IBM MobileFirst Starter Application samples. In the example, ng-view is used instead of ion-nav-view, thus declaration of <!DOCTYPE html> does not cause any issues.

Sample application (Android): https://github.com/user4706148/MobileFirstProject Does anyone know about this issue?

回答1:

It looks like it is the auto-generated and auto-inserted worklight.css (can be found in the generated Android project > assets\default\www\worklight\worklight.css) that triggers this issue.

I guess the CSS rules within it get rendered differently according to the used doctype. Specifically, this is happening due to the following rule:

body {
    position: relative;
}

You must not edit this file (as it gets re-generated on every build in MFP Studio) so what you can do instead is to override it in your own app's custom .css file.

This seems to work fine: