Как изменить таблицу стилей этого элемента ui-select? (угловой)

Я написал небольшую программу в angular, используя элемент ui-select. Проблема в том, что строка поиска действительно слишком длинная, и я не нашел, как ее уменьшить. Обычно у нас есть некоторые свойства «ширины», которые вы можете изменить для этого, но код css слишком сложен, и я не нашел, как с этим справиться. Что я хочу сделать, так это сохранить три бара в одной строке.

Я скопировал образец с официальной страницы ui-select, поэтому он содержит много вещей в css, которые я не понимал, и я мало знаю о css или бутстрапе...

Элемент стиля в index.html таков:

  <style>
    body {
      padding: 15px;
    }

    .select2 > .select2-choice.ui-select-match {
      /* Because of the inclusion of Bootstrap */
      height: 29px;
    }

    .selectize-control > .selectize-dropdown {
      top: 36px;
    }
  </style>
</head>

И они включили в свой образец огромный файл select.css, который вы можете найти в моем плункере: http://plnkr.co/edit/kuryoI5osBtRihYAeoVH?p=preview

  • Можете ли вы показать мне, как я могу уменьшить ширину панели поиска?
  • ПОЖАЛУЙСТА, покажите мне, как удалить все ненужные строки из select.css, включенного в плункер, которые не используются в моем примере?? Я не знаю, как я могу сделать это эффективно. Я боюсь удалять важные элементы и совсем запутался в этом огромном css-файле.

Заранее спасибо !


css angularjs ui-select
person salamanka44    schedule 26.11.2016    source источник
comment
salamanka44, рассматривали ли вы принятие моего ответа, если он был вам полезен?   -  person lealceldeiro    schedule 22.11.2017

Ответы (1)


arrow_upward
2
arrow_downward

Изменено 2 свойства (как использовать col-xx-nn) с начальной загрузкой

xx указывает, в каком представлении вы хотите применить свойство:

xs : очень маленькие устройства

sm: маленькие устройства

md: средние устройства

lg: устройства lg

nn указывает, сколько столбцов будет занимать элемент (всего 12). Полную документацию можно найти на странице http://getbootstrap.com/getting-started/.

И вот каким будет ваш код...

<div class="row">
     <!--First ui-select-->
    <div class="col-md-4"> <!--1/3 of 12 -->
      <ui-select ng-model="selectedItem">
       <!--ui-content-here--->
      </ui-select>
    </div>
    <!--Second ui-select-->
    <div class="col-md-4"> <!--1/3 of 12 -->
      <ui-select ng-model="selectedItem">
         <!--ui-content-here--->
      </ui-select>
    </div>
    <!--Third ui-select-->
    <div class="col-md-4"> <!--1/3 of 12 -->
      <ui-select ng-model="selectedItem">
         <!--ui-content-here--->
      </ui-select>
    </div>
</div>

Отредактировано

Включите пользовательский css и поместите эти правила. Не забудьте включить это после CSS-файлов ui-select, чтобы перезаписать его правила:

.ui-select-container {
    max-width: 200px; /*put the desired width here!*/
}

.ui-select-bootstrap > .ui-select-match > .btn {
    max-width: 200px; /*put the desired width here!*/
}

.ui-select-bootstrap > .ui-select-choices {
    max-width: 200px; /*put the desired width here!*/
    overflow-x: scroll;
}

.ui-select-container .form-control {
    max-width: 200px;  /*put the desired width here!*/
}

Проверьте этот рабочий планкер http://plnkr.co/edit/GN8i5PeFebS7Bo04GiUt?p=preview

В этом плункере правила находятся в файле myOwnCss.css, и мне нужно было добавить еще одно пользовательское правило, чтобы сделать это правильно, потому что некоторые другие стили ui-select по умолчанию. Смотри ниже

/**some additional styling in order to get
the demonstration working properly (very possibly not needed for you)*/
.ui-select-bootstrap .ui-select-choices-row.active > a {
  color: black;
  background-color: white;
}

Важно!:

  • Пожалуйста, имейте в виду, что если у вас есть опция со слишком длинным именем (она занимает больше желаемой ширины, в данном случае 200 пикселей), она не будет отображаться полностью в выбранной опции, и, кроме того, вам придется прокручивать значок x. оси, чтобы прочитать ее полностью в выпадающем списке.
  • Когда вы создаете элемент ui-select, он генерирует div для всего своего содержимого, и с тремя полосами все эти div, вероятно, будут отображаться, один под другим. (СОВЕТ: вы можете решить эту проблему, используя классы начальной загрузки: col-md-4 для каждого div, который обертывает каждый выбор пользовательского интерфейса)
person lealceldeiro    schedule 27.11.2016
comment
Не могли бы вы сказать мне, как я могу изменить файл select.css, пожалуйста? Потому что он слишком длинный, и я думаю, что он содержит много бесполезных строк для этого примера. Пожалуйста - person salamanka44; 27.11.2016
comment
Не могли бы вы рассказать, как я могу использовать фильтр limiTo в этом коде plunker. Я не успел, как его использовать. Спасибо ! - person salamanka44; 27.11.2016
comment
Пожалуйста, смотрите мой ответ, отредактированный. Надеюсь, поможет! Дайте отзыв :) - person lealceldeiro; 27.11.2016
comment
не могли бы вы, как использовать класс col-md-4, чтобы элементы дерева ui-select находились в одной строке? (не в каждой строке отдельно). Я плохо разбираюсь в начальной загрузке, это будет мой последний вопрос! Спасибо - person salamanka44; 27.11.2016
comment
Смотрите мой ответ и отредактированный plnkr. Обратите внимание, что если вы видите html-контент на маленьком или среднем устройстве, полосы могут располагаться одна под другой. Этого не должно происходить на среднем или большом устройстве. Надеюсь, это помогло! - person lealceldeiro; 27.11.2016