css3 - How to fix the css red notification bubble -


i have html follows 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 trying create red notification bubble on eye icon not looking good.

my css notification bubble.

.noti_container { position: relative; /* show 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 wanted hide small arrow created bootstrap red bubble , when number increase in bubble bubble size must increase right side. increasing on left side if number inside bubble 100 example whole eye icon becomes hidden bubble.

enter image description here

position badge left instead of right:

.noti_bubble {     position: absolute;     top: 2px;      /* anchor badge left-hand edge @ midpoint of icon */     left: 8px;      background-color: red;     color: white;     font-weight: bold;     font-size: 14px;     border-radius: 2px; } 

Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -