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.
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
Post a Comment