Блог

Я пытаюсь использовать angular для создания списка элементов. Страница будет приложением на мобильном телефоне. Сам список может содержать много элементов, поэтому я ожидаю, что элемент ul должен быть прокручиваемым («прокручиваемым»?). Я попытался последовать некоторому примеру, например http://jsfiddle.net/sirrocco/9z48t / и http://jsfiddle.net/qcv5Q/1 /..

Это html-код:

 <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>
  

и это код css:

 .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;
}
  

Теперь проблема в том, что я не хочу, чтобы появлялась горизонтальная полоса прокрутки, но она появляется, и я не понимаю, почему… Есть идеи?

добавьте overflow:hidden в #wrapper css.

CSS:

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

Демонстрация: http://jsfiddle.net/lotusgodkk/9z48t/5 /

ДЕМОНСТРАЦИЯ

http://jsfiddle.net/FTUrF/6/

Здесь изменен некоторый CSS:

  .log-widget-list {
    width: 200px;
    height: 300px;
    border: 1px solid #000;
    overflow: hidden;
}
.log-widget-list .scroller {
    width: 215px;
    height: 300px;
    overflow: scroll;
    padding-bottom: 15px;
    list-style-type: none;
}
  

Добавлено height и padding-bottom в .scroller и border в .log-widget-list

и добавил еще несколько таких:

 <span class="pull-right"> {{tinfo.sentTime}}min</span>