css - scrollable ul element without scrollbar -

css - scrollable ul element without scrollbar -

i'm trying utilize angular create list of elements. page app on mobile phone. list can have many elements expect ul element should scrollable ("swipable"?). tried follow illustration http://jsfiddle.net/sirrocco/9z48t/ , http://jsfiddle.net/qcv5q/1/..

this html code:

<div class="container"> <div id="spinner-icon" style="display:none"> <span class = "icon-spinner"></span> </div> <div class="col-xs-12 indentation push-down bg-white" ng-repeat="cei in completeelementinfo"> <div class="clearfix"> <div class="pull-left"> <h4>{{cei.description}}</h4> <p>{{cei.name}}</p> </div> </div> <div class="log-widget-list"> <ul class="list scroller clearfix" id="elements-list"> <li class="pull-left" ng-repeat="tinfo in cei.techinfo | orderby: 'tinfo.senttime'"> <h4 class="align-center">{{tinfo.elementshortcode}}</h4> <div class="clearfix"> <span class="icon-clock pull-left"></span> <span class="pull-right"> {{tinfo.senttime}}min</span> </div> </li> </ul> </div> </div> </div>

and css code:

.list { margin: 0; padding: 0; } .log-widget-list { height:100px; width: 720px; overflow: hidden; } .log-widget-list .scroller{ overflow-x: scroll; list-style-type: none; width: 1500px; /* combined width of li's */ } #elements-list li { width: 100px; list-style: none; box-sizing: border-box; border-top: none!important; background-color: #0accf8; padding: 4px; } #elements-list li:not(:last-of-type) { border-right: 3px solid #ffffff; } #elements-list [class^="icon-"], #elements-list [class*=" icon-"] { margin-top: 4px; font-size: 12px; }

now problem don't want horizontal scrollbar appears, appears , don't understand why... idea?

add overflow:hidden in #wrapper css.

css:

#wrapper { background: transparent; width: 550px; color: white; height:100%; overflow:hidden; }

demo: http://jsfiddle.net/lotusgodkk/9z48t/5/

css angularjs html-lists