title: scrollable ul element without scrollbar
body: <p>I'm trying to use angular to create list of elements. The page will be an app on mobile phone.
   The list itself can have many elements so what I expect is that the ul element should be scrollable ("swipable"?). I tried to follow some example like <a href="http://jsfiddle.net/sirrocco/9z48t/" rel="nofollow">http://jsfiddle.net/sirrocco/9z48t/</a> and <a href="http://jsfiddle.net/qcv5Q/1/" rel="nofollow">http://jsfiddle.net/qcv5Q/1/</a>..</p>
  
  <p>This is the html code:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div id="spinner-icon" style="display:none"&gt;
          &lt;span class = "icon-spinner"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-12 indentation push-down bg-white" ng-repeat="cei in completeElementInfo"&gt;
          &lt;div class="clearfix"&gt;
              &lt;div class="pull-left"&gt;
                  &lt;h4&gt;{{cei.description}}&lt;/h4&gt;
                  &lt;p&gt;{{cei.name}}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="log-widget-list"&gt;
              &lt;ul class="list scroller clearfix" id="elements-list"&gt;
                  &lt;li class="pull-left" ng-repeat="tinfo in cei.techInfo | orderBy: 'tinfo.sentTime'"&gt;
                      &lt;h4 class="align-center"&gt;{{tinfo.elementShortCode}}&lt;/h4&gt;
                      &lt;div class="clearfix"&gt;
                          &lt;span class="icon-clock pull-left"&gt;&lt;/span&gt;
                          &lt;span class="pull-right"&gt; {{tinfo.sentTime}}min&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is the css code:</p>
  
  <pre><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 all 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;
  }
  </code></pre>
  
  <p>Now the problem is that i don't want that the horizontal scrollbar appears, but it appears and i don't understand why... Any idea?</p>