現在、monacaを使ってアプリ作成をしております。
monacaのOnsen UI Sliding Menuを使ってメニューの右端にバッジを表示させたところ、下図の画像のPage1のようにバッジの形が縦長になってしまいました。自分が試みたいのはPage2のようなバッジのサイズで右端に表示させることです。なぜこのようなことが起こるのかわからなくて質問をしました。
プログラムを載せておきますので何が悪いのか教えて頂けると幸いです。
よろしくお願いします。
css
1.pull-right { 2 float: right; 3}
css
1.menu-badge { 2 3 padding: 3px 5px; 4 font-size: .5em; 5 color: white; 6 background-color: red; 7 border-radius: 3px; 8 9}
html
1<ons-page style="background-color: white"> 2 3 <ons-list> 4 5 <ons-list-item id="newsitem" 6 modifier="tappable" class="list__item__line-height" 7 onclick="app.slidingMenu.setMainPage('page1.html', {closeMenu: true})"> 8 <i class="fa fa-home fa-lg" style="color: #666"></i> 9 Page 1 10 </ons-list-item> 11 12 <ons-list-item id="newsitem1" 13 modifier="tappable" class="list__item__line-height" 14 onclick="app.slidingMenu.setMainPage('page2.html', {closeMenu: true})"> 15 <i class="fa fa-home fa-lg" style="color: #666"></i> 16 Page 2 17 </ons-list-item> 18 19 20 21 </ons-list> 22 23</ons-page>
javascript
1var app = ons.bootstrap("myApp", ["onsen"]); 2 app.controller("homeController", ["$scope", function($scope) { 3 ons.ready(function() { 4 5 6 $("#newsitem").append('<span class="menu-badge pull-right">i</span>'); 7 $("#newsitem1").append('<span class="menu-badge">i</span>'); 8 9 10 }); 11 }]);
回答3件
あなたの回答
tips
プレビュー