Значение по умолчанию для центра css в выпадающем меню выбора

Я использую select и ng-options в angularjs, чтобы показать список лет, которые я сам создаю. Я передаю текущий год в качестве значения по умолчанию для выбора.

здесь ссылка plunker.

Мой вопрос:

Как центрировать список по умолчанию? Мой плукер не завершен, потому что моя реальная ситуация похожа на ту, что нашла здесь http://www.cliptheme.com/demo/clip-two/AngularJs-Admin/STANDARD/#/app/form/wizard

Перейдите в Forms/ Мастер форм/ Шаг 3 Биллингс

как вы можете видеть, выбрав год, а затем снова щелкнув по нему, меню будет сосредоточено на выбранном году.

Но моя проблема в том, что когда я передаю ему значение года по умолчанию, как если бы я уже выбрал, а затем я нажимаю на список, я должен увидеть, что оно сосредоточено на этом значении по умолчанию, но это не так. Когда я снова нажму на этот год и снова нажму на список, я вижу, что он центрирован.

Другими словами, передача года в качестве значения по умолчанию не играет ту же роль, что и если я впервые выбрал его, щелкнув, потому что, когда я снова нажимаю повторно, он не центрируется. Как мы можем исправить эту проблему?

Вот файл CSS для используемого вами селектора: ссылка css, это не включено в плункер или фрагмент, потому что я не мог правильно воспроизвести этот CSS на плунтере, если можно, сделайте это.

var app = angular.module('app', []);

app.controller('MyCtrl', function($scope) {
    $scope.dates = {};
    $scope.years = [{value: 'Year', disabled: true}];
    var current_year = new Date().getFullYear();
    for(var i = current_year - 20; i <= current_year + 20; i++){
        $scope.years.push({value: i + ''});
    }
    var d = new Date();
    var n = d.getFullYear();

    $scope.dates.startYear = n;

});

   <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>

<body ng-app="app">
 <div ng-controller="MyCtrl">

        <label class="control-label">Year</label>
  <select name="startYear" ng-model="dates.startYear" id="startYear"
          ng-options="year.value as year.value disable when year.disabled for year in years"
          required>
      <option value="" disabled >Choose one</option>
  </select>
</div>
</body>

Ответы

Ответ 1

Сначала я должен сказать, что тег <select> не является стандартным тегом, так как рендеринг этого тега частично выполняется ОС, а не браузером, поэтому он ведет себя немного иначе, чем другие элементы, t действительно примените css ко всему, что вам нужно там.

Сказав это - есть (почти) всегда хаки, которые можно сделать, и я собираюсь показать этот пример как один из хаков:

function selectfocus() {
    el = event.target;
    sizeWhenOpen = 5;
    el.size=sizeWhenOpen;
    totalHeight = el.getBoundingClientRect().height;
    heightPerOption = el.scrollHeight/el.options.length;
    currentIndex = el.selectedIndex;
    el.scrollTop = heightPerOption * (currentIndex - Math.floor(sizeWhenOpen/2));
}

<select 
  onfocus="selectfocus()"
  onblur="this.size=1;"
  onchange="this.size=1; this.blur();">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
    <option>14</option>
    <option>15</option>
    <option>16</option>
    <option>17</option>
    <option>18</option>
    <option>19</option>
    <option>20</option>
    <option>21</option>
</select>

Ответ 2

Почему бы просто написать некоторый CSS для таргетинга тега span?

span { text-align: center; }

или еще лучше.... пометьте его идентификатору или классу

.className { text-align: center; }
#idName { text-align: center; }

Ниже представлен функциональный плункер.

Пример плунжера

Ответ 3

Что касается вашей ссылки на 2 обновления, вам просто нужно обновить свой CSS. Укажите ширину (независимо от того, что вы хотите) вашей области, в которой вы должны поместить поле выбора. Это, безусловно, устранит вашу проблему:)

.myctrl {
    position: absolute;
    vertical-align: top;
    margin-left: 50px;
    width: 200px;
}

Ответ 4

Дело в том, что ваш пример на cliptheme.com не прокручивается вообще. Он просто остается центрированным, потому что div сохраняет его положение прокрутки.

Итак, чтобы решить вашу проблему, вам просто нужно вычислить правильную позицию и установить ее в div .cs-options. Одно событие, которое может быть использовано, - _toggleSelect.

Рабочий пример (см. строку 370-372):

https://plnkr.co/edit/XgoeU8igSSeu044EFBCV

Это всего лишь намек, и ваше окончательное решение должно быть более сложным (например, не запрашивать элементы при каждом открытии списка).

Ответ 5

Вы можете применить стиль к идентификатору окна выбора, как показано ниже

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link href="#" onclick="location.href='https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'; return false;" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<style>
#startYear{
  padding:0 1% 0 10%;
}
</style>
<body>
  <div ng-controller="MyCtrl">


      <label class="control-label">Year</label>
      <select name="startYear" ng-model="dates.startYear" id="startYear"
              ng-options="year.value as year.value disable when year.disabled for year in years"
              required>
          <option value="" disabled >Choose one</option>
      </select>

  </div>
</body>

</html>