[bug] Badge does not show for the first column in grid

ionic-v1
1

Here is the main code:

<div class="row">
            <button class="col">
              <img src="images/button.png" class="button-img">
              <i class="badge badge-balanced">{{vote.tvote1}}</i>
            </button>
            <button class="col">
              <img src="images/button-right.png" class="button-img">
              <i class="badge badge-balanced">{{vote.tvote2}}</i>
            </button>
          </div>

The first badge does not show while the second on is at the top-right corner of the button.

2

Try this:

div.row
   div.col col-100
3

What do you mean?

<div class="row">
            <div class="col">
              <img src="images/button-clicked.png" class="button-img">
              <i class="badge badge-balanced">{{vote.tvote1}}</i>
            </div>
            <div class="col">
              <img src="images/button-right.png" class="button-img">
              <i class="badge badge-balanced">{{vote.tvote2}}</i>
            </div>
          </div>

I replaced the button with div, but it does not work , eithter. I want to have a badge for each button/div.

4

RTFM :wink:

<div class="row">
   <div class="col col-100">
      <img src="images/button-clicked.png" class="button-img" />
      <span class="badge badge-balanced">{{vote.tvote1}}</span>
   </div>
</div>

Or

<a class="item item-icon-left" href="#">
    <img src="images/button-clicked.png" class="button-img" />
    <span class="badge badge-balanced">{{vote.tvote1}}</span>
  </a>
5

Thanks.
But I want to have two buttons in one row, each has its own badge.

6

OK, I find adding a style=“position:relative” can make it work.

<div class="card">
        <div class="item item-divider item-text-wrap">
          some text
        </div>
          <div class="row item">
            <div class="col" style="position:relative">
              <img src="images/button.png" class="button-img">
              <span class="badge badge-balanced">{{vote.tvote1}}</span>
            </div>
            <div class="col" style="position:relative">
              <img src="images/button-right-clicked.png" class="button-img">
              <span class="badge badge-balanced">{{vote.tvote2}}</span>
            </div>
          </div>

But now it brings up a new problem that the image of left button is shown a litter higher than the right one, although the images are the same.