#css #angularjs #html-lists
#css #angularjs #html-списки
Вопрос:
Я пытаюсь использовать 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;
}
Теперь проблема в том, что я не хочу, чтобы появлялась горизонтальная полоса прокрутки, но она появляется, и я не понимаю, почему… Есть идеи?
Комментарии:
1. Вы когда-нибудь находили решение этой проблемы?
Ответ №1:
добавьте overflow:hidden
в #wrapper
css.
CSS:
#wrapper {
background: transparent;
width: 550px;
color: white;
height:100%;
overflow:hidden;
}
Демонстрация: http://jsfiddle.net/lotusgodkk/9z48t/5 /
Комментарии:
1. Я положил его… Полоса прокрутки все еще видна. Я пытаюсь получить горизонтальную прокрутку.
Ответ №2:
ДЕМОНСТРАЦИЯ
Здесь изменен некоторый 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>