Badge icon partially disappearing when number is < 1

Question

I'm using a badge icon to display the number of cart items. It works great when the number is 1 or more but if there are no items in the cart, it doesn't display zero, but rather half of it disappears. I've posted screenshots of what it looks like with a value of 1+ and then what it looks like when the cart is empty. Further, even after an item is added to the cart, the badge doesn't pop up with the number until refreshing or going to the next page after the item has been added.

I'm thinking I probably have to add more script but just learning and not sure how I would do this.

To give the full picture: This is a BigCommerce site so the cart info is generated by an internal server. It is referenced by variable %%GLOBAL_CartItems%% (in code below) and normally displays as a text string, "View Cart.." along with the total number of items in the cart. Since I only want the number, I added script that replaces the text with numeric values only. I've included both the HTML and script below.

What it looks like with 1 or more in cart:

What it looks like with no items in cart:

<li style="display:%%GLOBAL_HideCartOptions%%">
    <span><a href="%%GLOBAL_ShopPathNormal%%/cart.php" title="%%LNG_ViewCart%%"><i class="icon-large sprite-glyphicons_halflings_115_shopping-cart2x icon-2x" style="position: relative; top: 14px; right: 16px;"></i><span id='cart-items' class="badge badge-info" style="position: relative; top: 18px; right: 17px;">%%GLOBAL_CartItems%%</span></a></span>
</li>

<script type='text/javascript'>
   var $cart_items = $('#cart-items');
   $cart_items.text($cart_items.text().replace(/[^0-9]/g, ''));
</script>

Badge CSS:

.badge {
  padding: 1px 9px 2px;
  font-size: 10.998px;
  font-weight: bold;
  line-height: 14px;
  color: #ffffff;
  vertical-align: baseline;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #999999;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}

Answer 1

Figured out the answer to my own issue: turns out I was missing some CSS for the badge:

    .badge:empty { 
        display: none; 
     }

Guess I thought this would be in the bootstrap already...either I erroneously deleted it somehow or maybe it just needed to be added. Either way, problem solved.

Answer 2

Add the folowwing CSS to your styleshtee file or add it inline

.cart-items {
  display:block;
  min-width:25px;
}

Answer 3

I suspect that the html(or its css at least) of the badge icon is responsible for its disappearance, as in it is not correctly put together.Post a code sample, and we will try to fix it. As for the number not being updated until refresh, my first question would be do you capture the event when a buyer puts something in the cart? That would be the time to update the number, say like:

$("#cart").on('update', undefined, cart.NumberOfItems, updateBadgeIcon);

function updateBadgeIcon(event)
{
    var newNumber = event.Data;
    $('#badgeNumber').html(newNumber);
};

Take a look at jQuery documentation, and jQuery on method.