fix(item): Fix badge moving to new line when text is too long, closes #…

…551
ionic-team · Mar 1, 2014 · 4d36671 · 4d36671 · damienleri · Mar 1, 2014
1 parent 11a4338
commit 4d36671
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/scss/_items.scss b/scss/_items.scss
@@ -51,7 +51,10 @@
 
   // Align badges within items
   .badge {
-    float: right;
+    @include display-flex();
+    position: absolute;
+    top: $item-padding;
+    right: ($item-padding * 2) + 5;
   }
   .badge + .badge {
     margin-right: 5px;

diff --git a/test/html/lists.html b/test/html/lists.html
@@ -177,7 +177,9 @@ <h1 class="title">Lists</h1>
 
           <a href="#" class="item item-icon-left">
             <i class="icon ion-person-stalker energized fill-icon"></i>
-            Friends
+            Friends asdfasdf asdfasd fasdfasdf asdf asdfasd fasdf asdf asd
+            asdfasdfasdf asdfasdfasdf asdf asdf asdfasdfasd fasdfa sdfasdf asdf asdf
+            asdfa sdf asdfasdfa sdf asdf asdfasdfasdf asdf asdf asdf
             <span class="badge badge-assertive">0</span>
           </a>
 
@@ -191,6 +193,7 @@ <h1 class="title">Lists</h1>
 
           <div href="#" class="item">
             Not a link so no default right arrow
+            <span class="badge badge-assertive">999</span>
           </div>
 
           <a href="#" class="item item-complex">