Сортируемый компонент Kendo UI не работает - PullRequest
Новая
       27

Сортируемый компонент Kendo UI не работает

0 голосов
/ 23 июня 2019

Я хотел бы отсортировать список по горизонтали, как в демоверсии по этой ссылке: https://www.telerik.com/kendo-angular-ui/components/sortable/

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

Шаги для воспроизведения: 

ng new notes
ng add @progress/kendo-angular-sortable

Копировать демонстрационный код

notes.component.ts 

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-notes',
  templateUrl: './notes.component.html',
  styleUrls: ['./notes.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class NotesComponent implements OnInit {

  public items: string[] = [
    'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'
  ];

  constructor() { }

  ngOnInit() {
  }

}

notes.component.html 

<div class="container-fluid">
  <kendo-sortable [kendoSortableBinding]="items" [navigatable]="true" [animation]="true" class="row"
    itemClass="item col-xs-6 col-sm-3" activeItemClass="item col-xs-6 col-sm-3 active">
  </kendo-sortable>
</div>

notes.component.css 


.item {
    background-color: #bfe7f9;
    color: #1494d0;
    border: 1px solid #fff;
    height: 70px;
    line-height: 68px;
    font-size: 16px;
    text-align: center;
    outline: none;
    cursor: move;
}

.item:hover,
.employee:hover {
    opacity: 0.8;
}

.item.active,
.employee.active {
    background-color: #27aceb;
    color: #fff;
    border-color: #27aceb;
    z-index: 10;
}

.item.disabled {
    opacity: 0.5;
    cursor: default;
}

.team {
    min-height: 240px;
    padding-top: 15px;
    padding-bottom: 15px;
    border: 1px solid #fff;
    background-color: #dff3fc;
}

.team-b {
    background-color: #fbe0e7;
}

.employee {
    background-color: #bfe7f9;
    color: #1494d0;
    margin: 1px;
    padding: 5px;
    cursor: move;
}

.team-b .employee {
    background-color: #f3b9c9;
    color: #dd4672;
}

.team-b .employee.active {
    background-color: #dd4672;
    color: #fff;
}

.empty {
    height: 150px;
}
...