如何为下拉列表添加滚动条

时间:2017-05-03 09:07:48

标签: javascript jquery html css angularjs

我是angular js的新手。我有dropdown,其中有20多个元素。该名单将继续增加。所以,我想要一个滚动条。我尝试了不同的方法,将size属性用于selectoverflow,但没有运气。我的代码就像 -

<div class="col-xs-12">
                    <div class="form-group">
                    <label class="col-xs-3 control-label" for="domain">Domain</label>
                        <div class="col-xs-4">
                            <div class="multiselect">
                                <div class="selectBox" ng-click="showCheckboxes()">
                                  <select>
                                        <option>Select an option</option>
                                   </select>
                                     <div class="overSelect"></div>
                                </div>
                                <div id="checkboxes" >
                                    <label  ng-repeat="domain in allDomainValues" for="{{domain.name}}">
                                        <input type="checkbox" value={{domain.name}} ng-click="getthecheckeddomains(domain.name)" ng-disabled="isalreadychecked" id="{{domain.name}} " />{{domain.name}}
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                  </div>

css -

.multiselect {
  width: 169px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

在控制器中 -

var expand  = false
$scope.allDomainValues = [{ name: 'HR' }, { name: 'Finance' }, { name: 'Banking' }, { name: 'Telecom' }];
$scope.showCheckboxes = function() {
                    var checkboxes = document.getElementById("checkboxes");
                    if (!expand) {
                    checkboxes.style.display = "block";
                    expand = true;
                    } else {
                    checkboxes.style.display = "none";
                    expand = false;
                    }
                };

如何解决这个问题?任何帮助对我来说都很棒。

0 个答案:

没有答案