Hi, @Tom !
Onsen UI automatically adds 20px gap on top of the screen if the app runs on Cordova.
But your app seems to already have a 20px white status bar for some reason, so you have to disable the feature (auto status bar fill) of Onsen UI.

You just need to execute ons.disableAutoStatusBarfill() in the beginning of your app.
https://onsen.io/v2/api/js/ons.html#method-disableAutoStatusBarFill

@jamal
Thank you for the information.
Since viewport-fit=cover takes effect only on iPhone X, I do not think it is related to this issue.

(Dec 22, 2017: Sorry, it seems that UIWebView automatically adds 20 px gap since iOS 11. You should add viewport-fit=cover even if the app is running on iOS devices other than iPhone X)

@imanishik said:

また、記載されているPolyfill追加以外に、エラー対応などのために必要な処理があるのでしょうか？

polyfill を追加して動作しない場合、何らかのエラー対応処理を記述する必要があると思われますが、
処理の詳細については Onsen UI チームとしては現状把握できておりません。
ご期待に添えず申し訳ありませんが、よろしくお願いいたします。

@imanishik
ご質問ありがとうございます。

OnsenUIで動作確認の取れているPolyfill実装があったら教えてください。

IE11 は Onsen UI のサポート対象ブラウザに含まれていないため、現時点では
Polyfill 実装の動作確認も行っておりません。
ご理解の程よろしくお願いいたします。

Hi, @vgriffin .

ERROR Error: No provider for OnsNavigator! appears when the component is not a descendant of <ons-navigator>.

Basically, if you want to access ons-navigator, ons-tabbar, ons-splitter, ons-splitter-content and ons-splitter-side, we recommend you creating a service which stores a reference to each component.

Thank you.

Hi, @vgriffin !

This problem is a bug of Onsen UI Core and related to this issue ticket (OnsenUI/OnsenUI#1926).

You can avoid the problem by
(1) Keep the content of <ons-tab> empty and use icon attribute of <ons-tab>.

<ons-tabbar animation="none">
  <ons-tab [page]="initPageComponent" icon="md-home" label="Init page" active badge="7"></ons-tab>
  <ons-tab [page]="pageAComponent" icon="md-settings" label="Page A"></ons-tab>
  <ons-tab [page]="pageBComponent" icon="md-pizza" label="Page B"></ons-tab>
</ons-tabbar>

or
(2) Put <div class="tabbar__content"></div> and wrap the <ons-tab>s with <div class="tabbar"></div>

<ons-tabbar animation="none">
  <div class="tabbar__content"></div>
  <div class="tabbar">
    <ons-tab [page]="initPageComponent" label="Init page" active badge="7">
      <ons-icon icon="md-home" size="24px"></ons-icon>
    </ons-tab>
    <ons-tab [page]="pageAComponent" label="Page A">
      <ons-icon icon="md-settings" size="24px"></ons-icon>
    </ons-tab>
    <ons-tab [page]="pageBComponent" label="Page B">
      <ons-icon icon="md-pizza" size="24px"></ons-icon>
    </ons-tab>
  </div>
</ons-tabbar>

Thank you.

@vgriffin
That error on Git was already fixed in Onsen UI 2.5.1.
https://github.com/OnsenUI/OnsenUI/commit/60687db5f857adf00aaa2e7b9b94da43d3afe85b#diff-b9cfc7f2cdf78a7f4b91a753d10865a2

But as I mentioned in the previous reply, ngx-onsenui currently depends on Onsen UI 2.3.x.
I will fix this problem as soon as possible. Thank you.

0 frandiox committed to OnsenUI/OnsenUI

chore(polyfills): Change custom-elements dependency location.

Hi, @vgriffin!

You can fix that kind of error by manually running npm install onsenui@~2.3.3 --save.

The fundamental cause of the error is that ngx-onsenui is not yet supporting the latest version of onsenui (2.5.3).
I am working on updating ngx-onsenui now. Thank you.

@Gyorgy-Orban

There seem to be some recent development going on but at the same time many links on the site / documentation are broken.

In terms of the website, it was not available between 6pm~10pm (GMT+0) due to AWS setting. It is fixed now.

@huybn5776
Yes, the current Angular 2+ binding is not compatible with the latest version of Angular and Onsen UI.
Currently we are working on updating the Angular 2+ binding and Monaca CLI.
Thank you for understanding.

The Onsen UI team has been working to provide you with exciting new features at every new release. Behold as here come some more!

Click here to see the original article

Hi, @btx!

This problem is already mentioned in this topic.
If you want to use Onsen UI with Angular CLI, you have to add the following settings into your .angular-cli.json:

      "styles": [
        "../node_modules/onsenui/css/onsen-css-components.css",
        "../node_modules/onsenui/css/onsenui.css"
      ],
      "scripts": [
        "../node_modules/onsenui/js/onsenui.js"
      ],

Currently we are preparing a new version of angular2-onsenui which supports Angular 4 and fixing the contents in onsen.io.
Thank you.