kendo ui - переопределить стиль контейнера k-анимации только для одного раскрывающегося списка - PullRequest
Новая
       50

kendo ui - переопределить стиль контейнера k-анимации только для одного раскрывающегося списка

0 голосов
/ 14 июля 2020

Я использую выпадающий список kendo-ui. Я добавляю немного ovveriding- css, и он работает хорошо. 

.k-animation-container {
//this is popup that is html is rendered out of the page element
//so it cannot be selected by id / panaya class / panaya element

.k-popup.k-list-container {
    .k-item,
    .k-item.k-state-selected,
    .k-item.k-state-focused {
        background-color: transparent;
        color: $darken-gray-color;
        margin-left: 0;
        margin-top: 0;
    }
  }
}

Проблема в том, что, хотя в каждом раскрывающемся списке есть другой экземпляр элемента ввода, в списке есть один экземпляр, который скрыт, и когда вы нажимаете любой комбо - отображается рядом с выбранным в данный момент комбо. Что сказать - когда вы переусердствуете со стилем контейнеров со списком, - откладывает его для всех комбинаций. Есть ли решение этой проблемы?

Ответы [ 2 ]

1 голос
/ 14 июля 2020

Ну, это известная проблема, для каждого всплывающего окна kendo отображает независимый div с классом k-animation-container

Вы можете попробовать это решение, предложенное на форуме Telerik: k-animation-container 

$("#spreadsheet").on("click", ".k-spreadsheet-editor-button", function(e) {
  var animationContainer = $(".k-animation-container").last();
  // use some custom conditional statement that will determine if this is the correct list popup, e.g. check what's inside the popup
  if (true) {
      animationContainer.children(".k-popup").css("min-width", 200);
  }
});

Сам не пробовал, гл.

0 голосов
/ 16 июля 2020

Моя команда нашла отличное решение:

Существует возможность указать собственный идентификатор элемента ввода. Затем вы можете выбрать контейнер-список по заданному вами пользовательскому идентификатору + 'list' str.

Теперь, если вы хотите получить k-animation-container, вы можете выбрать элемент списка и затем запросить его parent.

Пример кода:

Элемент ввода: 

 <span
            kendo-multi-select
            id="my-type-dd"
            k-options="$ctrl.getVMultySelectConfig()"
            k-ng-model="$ctrl.selectedTypes"
        ></span>

Селекторы:

Если вам нужен только k-list-container и не k-animation-container, вы можете сделать это, набрав css: 

.k-animation-container #my-type-dd-list {
//this is popup that is html is rendered out of the page element
//the id is the id you give to the element + '-list'

&.k-popup.k-list-container {
    padding: $space-normal 0 $space-small $space-small;
    box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.1);
 }
}

Если вам нужен k- aniamation-container, вам нужно выбрать его jQuery, потому что css не имеет родительского селектора: 

var kAnimationElement = $("#my-type-dd-list").parent();
...