Hi! I'm using KendoUI Sortable widget with Twitter Bootstrap to create a dynamic dashboard editor "tile" style.
Every tile is a k-block and inside it is rendered a chart, the tiles ​have variable dimension: width is a fraction of 12 bootstrap columns, height is 400px or 800px. See the attached images to have an idea.
All works fine but in some cases I have empty zones, as you can see in picture 2, when the tile is big it blocks the floating left movement of other smaller tiles. There is no way to sort an object in that empty zone, and of course is a waste of space.
This is the HTML code, I'm using Angular with Kendo also:
<
style
>
.small-panel {
height: 400px;
}
.big-panel {
height: 800px;
}
</
style
>
<
div
class
=
"row"
id
=
"canvas"
kendo-sortable
k-options
=
"ctrl.sortOptions"
>
<
div
ng-repeat
=
"dataItem in ctrl.charts"
class
=
"k-block col-lg-{{dataItem.col.lg}} col-md-{{dataItem.col.md}} col-sm-{{dataItem.col.sm}}"
>
<
div
class
=
"k-header"
>{{dataItem.name}} col {{ dataItem.col }}</
div
>
<
div
kendo-chart
k-theme
=
"'material'"
k-options
=
"{{ dataItem.options }}"
class
=
"{{ dataItem.dimension }}-panel"
>
</
div
>
</
div
>
</
div
>
As you can see are just simple divs, there is no list view, repeated with angular directvie ng-repeat
Have you got any idea to find a solution about this problem?