diff --git a/client/res/templates/dashboard.tpl b/client/res/templates/dashboard.tpl
index ab3cef8d64..e56a7a09cb 100644
--- a/client/res/templates/dashboard.tpl
+++ b/client/res/templates/dashboard.tpl
@@ -23,5 +23,5 @@
-
{{{dashlets}}}
+{{{dashlets}}}
diff --git a/client/src/views/dashboard.js b/client/src/views/dashboard.js
index f08ac8213c..7829c9f8d7 100644
--- a/client/src/views/dashboard.js
+++ b/client/src/views/dashboard.js
@@ -193,8 +193,24 @@ define('views/dashboard', ['view', 'lib!gridstack'], function (Dep, Gridstack) {
this.initGridstack();
},
+ initFallbackMode: function () {
+ var $dashboard = this.$dashboard = this.$el.find('> .dashlets');
+ $dashboard.addClass('fallback');
+
+ this.currentTabLayout.forEach(function (o) {
+ var $item = this.prepareFallbackItem(o);
+ $dashboard.append($item);
+ }, this);
+
+ this.currentTabLayout.forEach(function (o) {
+ if (!o.id || !o.name) return;
+ this.createDashletView(o.id, o.name);
+ }, this);
+ },
+
initGridstack: function () {
var $gridstack = this.$gridstack = this.$el.find('> .dashlets');
+ $gridstack.removeClass('fallback');
var draggable = false;
var resizable = false;
@@ -281,6 +297,26 @@ define('views/dashboard', ['view', 'lib!gridstack'], function (Dep, Gridstack) {
return $item;
},
+ prepareFallbackItem: function (o) {
+ var $item = $('');
+ var $container = $('');
+
+ $container.attr('data-id', o.id);
+ $container.attr('data-name', o.name);
+ $container.attr('data-x', o.x);
+ $container.attr('data-y', o.y);
+ $container.attr('data-height', o.height);
+ $container.attr('data-width', o.width);
+ $container.css('min-height', (o.height * this.getThemeManager().getParam('dashboardCellHeight')) + 'px');
+
+ $item.attr('data-id', o.id);
+ $item.attr('data-name', o.name);
+
+ $item.append($container);
+
+ return $item;
+ },
+
saveLayout: function () {
if (this.layoutReadOnly) return;
diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less
index fee73bbf64..d81687de57 100644
--- a/frontend/less/espo/custom.less
+++ b/frontend/less/espo/custom.less
@@ -1567,13 +1567,19 @@ table.less-padding td.cell[data-name="buttons"] > .btn-group {
padding-right: @padding-small-horizontal;
}
-.panel.dashlet {
- height: inherit;
-}
-.dashlet-container {
- overflow-y: hidden;
+.dashlets {
+ .panel.dashlet {
+ height: inherit;
+ }
+
+ .dashlet-container {
+ overflow-y: hidden;
+ }
+ margin-left: -8px;
+ margin-right: -8px;
}
+
.panel.dashlet > .panel-body {
overflow-y: auto;
overflow-x: hidden;