select box in not displaying properly

Select list is not displaying properly.

Please see the images..

enter image description here

enter image description here

some height is conflicting, I am using angular ui-select for select list.

    <ui-select id="viewSelector" class="viewSelector input-small" ng-model="dashboard.refresh" theme="selectize" style="width: 120px;" ng-change="autoRefreshUpdated()">
    <ui-select-match placeholder="Select Interval">{{$select.selected}}</ui-select-match>
    <ui-select-choices repeat="interval in autoRefreshIntervals">
        <div ng-bind-html="interval"></div>
    </ui-select-choices>
</ui-select>

Code rendered as :

<div class="viewSelector input-small ui-select-container selectize-control single ng-valid ng-touched ng-dirty ng-valid-parse" ng-class="{'open': $select.open}" id="viewSelector" ng-model="dashboard.refresh" theme="selectize" style="width: 120px;/* height: 10px !important; */" ng-change="autoRefreshUpdated()">
    <div class="selectize-input" ng-class="{'focus': $select.open, 'disabled': $select.disabled, 'selectize-focus' : $select.focus}" ng-click="$select.activate()">
        <div ng-hide="($select.open || $select.isEmpty())" class="ui-select-match" ng-transclude="" placeholder="Select Interval"><span class="ng-binding ng-scope">5s</span>

        </div>
        <input type="text" autocomplete="off" tabindex="-1" class="ui-select-search ui-select-toggle ng-pristine ng-valid ng-touched ng-hide" ng-click="$select.toggle($event)" placeholder="Select Interval" ng-model="$select.search" ng-hide="!$select.searchEnabled || ($select.selected &amp;&amp; !$select.open)" ng-disabled="$select.disabled" aria-label="Select box">
    </div>
    <div ng-show="$select.open" class="ui-select-choices ui-select-dropdown selectize-dropdown single ng-scope ng-hide" repeat="interval in autoRefreshIntervals" style="opacity: 1;">
        <div class="ui-select-choices-content selectize-dropdown-content">
            <div class="ui-select-choices-group optgroup" role="listbox">
                <div ng-show="$select.isGrouped" class="ui-select-choices-group-label optgroup-header ng-binding ng-hide" ng-bind="$group.name"></div>
            </div>
        </div>
    </div>
    <ui-select-single></ui-select-single>
    <input ng-disabled="$select.disabled" class="ui-select-focusser ui-select-offscreen ng-scope" type="text" id="focusser-1" aria-label="Select box focus" aria-haspopup="true" role="button">
</div>


Source: html5

Leave a Reply