Problem with u-select placeholder

Question

Problem with u-select placeholder

Navigation

#1 by (1 votes)

1

Apparently when I place a ui-select within many elements, the placeholder of this element gets a width: 10px (I do not know why), which is a problem because apart from seeing that element badly, it can only be selected giving clicking just where the letter appears on the shore:

Here is an example of the code using angularjs:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="arabicaEditCtrl as $ctrl">    
    <div ng-show="!$ctrl.loading">
       <form role="form" class="form-signin form" ng-cloak>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
               <div class="form-group">
                      <div class="col-sm-6 col-xs-12">
                          <label class="control-label" for="totalAcidez" style="color:#1abb9c;">Total acidez (+):</label>
                          <ui-select name="labs" ng-model="$ctrl.model.totalAcidez" theme="bootstrap">
                              <ui-select-match placeholder="Escoja valor">
                                  {{$select.selected}}
                              </ui-select-match>
                              <ui-select-choices repeat="item in $ctrl.collections.values track by $index">
                                  <div ng-bind="item"></div>
                              </ui-select-choices>
                          </ui-select>
                      </div>
            </div>
       </form>
    </div>
</div>

Only if I remove the <div ng-show="!$ctrl.loading"> is displayed correctly.

angularjs div select input

asked by Dr oscar 30.03.2018 в 02:16

source

1 answer

error android studio sdk facebook Android studio error uses-permission

score 1 · Answer 1

Apparently it is not a fault that occurs because it is contained in several divs, but it occurs when the element ui-select gets to be hidden in some way. To fix it include in a css:

 .ui-select-multiple.ui-select-bootstrap > div > input.ui-select-search {
    width:auto !important;
}