CODEWITHSUNDEEP
csstwitter-bootstrap
Saurabh Kumar
Saurabh Kumar

Reputation: 16661

How to fix the css red notification bubble

I have a Html Like follows which I created using twitter bootstrap.

<div class="row-fluid" style="padding-top:10px;">
    <div class="noti_bubble"><@= friendRequestCollection.size() @></div>
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          <i class="icon-eye-open icon-white"></i>
          <span class="caret"></span> 
    </a>
    <ul class="dropdown-menu">
        <@ friendRequestCollection.each(function(user) { @>
            <li id="user-list-<@= user.get('username') @>"><a href="#"><@= user.get('firstName') @></a></li>
        <@ }); @>
    </ul>
 </div>

I am trying to create a red notification bubble on the eye icon but its not looking so good.

My css for notification bubble.

.noti_Container {
position: relative;
/* This is just to show you where the container ends */
width: 16px;
height: 16px;
cursor: pointer;
  }

  .noti_bubble {
position: absolute;
top: 2px;
right: 10px;
background-color: red;
color: white;
font-weight: bold;
font-size: 14px;
border-radius: 2px;
}

What i wanted is like hide the small arrow created by bootstrap with the red bubble and when the number increase in the bubble the bubble size must increase right side. Currently its increasing on left side so if the number inside the bubble is 100 for example so the whole eye icon becomes hidden with the bubble.

enter image description here

Upvotes: 1

Views: 2541

Answers (2)

gespinha
gespinha

Reputation: 8487

To solve the increasing issue, just change the .noti_bubble CSS to this:

.noti_bubble {
   position: relative;
   display:inline-block;
   top: 2px;
   left: 25px;
   background-color: red;
   color: white;
   font-weight: bold;
   font-size: 14px;
   border-radius: 2px;
}

Upvotes: 0

Andr&#233; Dion
Andr&#233; Dion

Reputation: 21708

Position your badge with left instead of right:

.noti_bubble {
    position: absolute;
    top: 2px;

    /* this will anchor your badge from its left-hand edge at the midpoint of your icon */
    left: 8px;

    background-color: red;
    color: white;
    font-weight: bold;
    font-size: 14px;
    border-radius: 2px;
}

Upvotes: 2

Related Questions