Posts made by asial-matagawa

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.

You may recall that 2 months ago (March 14) we released Onsen UI 2.2.0.
Since then we have continuously worked hard to improve Onsen UI according to the feedback we’ve been receiving (e.g. GitHub issues).
That effort culminated in the latest version, 2.2.6.

In this post we’d like to explain what the most recent updates of Onsen UI are all about.

Click here to see the original article

@Shubham-Kaushik
It seems that you are using onsenui@1.3.17, but Onsen UI 1 is no longer supported.
Could you consider using Onsen UI 2?

@Fran-Diox
I found that this error occurred because:

• We are using for-of syntax in util._captureTree (link).
• for-of syntax is transpiled by Babel.
• But babel-plugin-transform-es2015-for-of outputs code with Symbol (link)
  • Symbol is a feature of ES2015, so this might be a bug
• Symbol is supported since Android 5.1 WebView (link).

What we could do is (1) polyfill Symbol or (2) fix babel-plugin-transform-es2015-for-of.

It has been 4 weeks since we released 2.0.0-alpha.0. We know, we know, alpha is a scary tag. That’s why we’re looking to move on from it as fast as possible.

Click here to see the original article

I know I know, Monaca Team has been pretty quiet. Sorry about the lack of communication. We’ll try to be better. Lots going on!

One of the things we’ve been working on is to improve your build experience. And we are happy to release an update today. Woo hoo!

Let’s go over the changes, shall we?

First thing you will notice is that the interface is revamped. Now there is a dedicated and streamlined page rather than bunch of popups and this interface is the same for IDE and the Localkit. No more confusion there.

Of course it is not just the look that changed. To build iOS apps, you can now manage secret key, certificate and provisioning files right inside Monaca.

The best part is that you can manage multiple iOS certificates and provisioning files. This allows you to specify which provisioning file to use for each project and for each build type. Localkit users can do this too.

You can also see build log in real time right there. Good to know what’s going on, right?

We hope this update makes the build much easier and more pleasant for you. Let us know what you think - we are always looking for your feedback.
Be sure to let us know if you have any issue, request or whatever comment about Monaca.

Happy coding!

Click here to see the original article

In a previous article we introduced how to use the Onsen UI components directly from Vue.js 2.

Click here to see the original article

@kyuhou
こちらでも今回の問題を再現できました。
今回の問題は Onsen CSS Components のバグによるものと思われます。

修正方法についてですが、
ダウンロードした onsen-css-components.css の
.text-input--underbar { ~~~~ }
.text-input--underbar::invalid { ~~~~ }
に含まれる color: #fff; を color: #1f1f21; に修正していただけると、
ダイアログ内のテキスト入力欄の文字色のみを白から黒に修正することができます。

よろしくお願いいたします。

@kyuhou
また、スクリーンショットがあると嬉しいです。

@kyuhou
「promptでの入力欄」が何を指しているのかよく分かりません。
prompt 関数やその周辺のコードを貼り付けていただけますでしょうか？

@Viatorus
Thank you for reporting.

The kitchensink example is out of date. Could you please resolve this?

It was due to old dependencies, so I have updated all the dependencies in the kitchensink example:
https://github.com/OnsenUI/angular2-onsenui-kitchensink

And https://www.npmjs.com/package/angular2-onsenui is also two months old and has similar errors.

We released angular2-onsenui@1.0.0-rc.4 in last week. Maybe the errors are fixed.

Would it be possible to implement the example into:
https://github.com/AngularClass/angular2-webpack-starter ?

The kitchensink example is not a seed for Onsen UI app, so we are not planning to use large templates such as angular2-webpack-starter.

Thank you!