【Monaca】Onsen UI 自作のテンキーボードを制御する

前回紹介した【Monaca】Onsen UI 自作のテンキーボードを表示するの続き、制御の処理を追加したいと思います。
※2020/05/04 コードの一部を修正。


Continue reading

【Monaca】Onsen UI ons-list-itemの余白を調整する

Onsen UIを利用したアプリでデータなどの一覧を表示する場合、ons-listons-list-itemを使用します。
しかし、ons-list-itemの余白により、表示できる行数が限られたり、表示バランスがイメージどおりにならない問題が発生します。
今回は、ons-list-itemの余白を調整する方法を紹介します。
Continue reading

【Monaca】Onsen UIでnend広告が表示されない

最新記事はこちら。


Onsen UIを使用してnend広告を表示させようと、下記コードを設置しても表示されない。(※テスト用コード)
どうして?と悩む方も多いと思う。
2016-06-08-10-00-22
[html]


[/html]
答えは簡単。
実際は広告が表示されているが、Onsen UIはCSSでz-indexを使用しているため、Onsen UIが表示した画面の裏に隠れてしまう。
広告用のコードをdivタグで囲い、z-index: 99でOnsen UIが表示した画面の上に表示させる。
既存のブラウザで表示させたい場合は、【Monaca】nend広告を既存ブラウザで表示するを参照。
2016-06-08-10-03-43
[html]









nend広告テスト




[/html]

【Monaca】Onsen UI ons-list のズレをなくす

Onsen UIはすばらしいフレームワークだが、MonacaのAndroid用アプリで使用すると難点もある。
例えば、ons-list
iPhoneの設定画面のようなイメージの画面が再現できる。
2016-06-06-18-27-47

しかし、使い方によっては問題が発生する。
例えば、左はons-listを5回使用した場合、右はons-list-itemを5回使用した場合。
ご覧のとおり、同じ並びを期待するもズレが発生してしまう。
2016-06-06-18-28-03
[html]

テスト


あああ


いいい


ううう


えええ


おおお

あああ
いいい
ううう
えええ
おおお


[/html]

ons-listons-list-itemのクラスでborder-topborder-bottomを指定しているため、ons-listごとに上線や下線が引かれズレが発生してしまう。
そこで次のCSSを追加し、ons-list-itemの下線のみ有効にする。
※わかりやすくするため、色を変更済み。
2016-06-06-22-25-18
[css]
.list {
border-top: none;
border-bottom: none;
}
.list__item {
height: 43px;
border-top: none;
border-bottom: 1px solid #ddd;
}
.list__item:first-child {
border-top: none;
border-bottom: 1px solid #f00;
}
.list__item:last-child {
border-top: none;
border-bottom: 1px solid #0f0;
}
.list__item:first-child:last-child {
border-top: none;
border-bottom: 1px solid #00f;
}
[/css]