Show notification counter with bootstrap

css, html, javascript, twitter-bootstrap

Solution

Set `display: inline-block` on the `.notif-surround` `span`.

.notif-surround{
  overflow:hidden;
  display: inline-block;
}

The problem is that you can't set overflow hidden on an element which is set as `display: inline`, which is the default for a `span`, as you can't set its width and its height. Setting `display: block` or `display: inline-block` fixes this, with the first forcing a line break after itself, and the latter leaving the original flow of elements intact.

Problem

I want to implement a notification counter which rolls up to show incremented number.(Like the one google shows with google+ notifications) I can't get `overflow:hidden` to work for `.notif-surround`. Its child element's(the one with three numbers) height is larger and still it's visible. I want its appropriate portion to be visible. How do I do that? jsfiddle demo html ``` <div id="top_navbar" class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" href="/">Name</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="span6 offset1"> <form class="navbar-form form-search"> <div class="input-append"> <input class="span4 search-query" type="text" placeholder="Search..."> <button type="submit" class="btn">Search</button> </div> </form> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home <span class="notif-surround"><span class="badge badge-info notif-background" > </span><span id="num_notif">0<br/>1<br/>2</span></span><b class="caret"></b></a> <ul class="dropdown-menu"> <li class="nav-header">Notifications</li> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Messages</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li>  <li class="dropdown"> <img class="img-rounded img-profile inline" src="{{user['picture']['data']['url']}}" /> <a href="#" class="dropdown-toggle profile-name" data-toggle="dropdown">{{user['name']}} <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> </div> </div> </div> ``` css ``` .notif-background{ width:18px; height:14px; } #num_notif{ position: relative; float: right; left: -38px; color: #fff; height:18px; bottom:20px; } .notif-surround{ overflow:hidden; } ```

Original source