Update TileView content position in RTL mode if the content size is l…

…ess than the widget (T860587) (#12000)
DevExpress · Feb 13, 2020 · 46603d4 · 46603d4
1 parent f3e0d30
commit 46603d4
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/js/ui/tile_view.js b/js/ui/tile_view.js
@@ -217,8 +217,17 @@ const TileView = CollectionWidget.inherit({
         this._cells.push(new Array(this._cellsPerDimension));
 
         this._arrangeItems(items);
+        this._renderContentSize(config, itemMargin);
+    },
+
+    _renderContentSize: function(config, itemMargin) {
         if(windowUtils.hasWindow()) {
-            this._$container[config.mainDimension](this._cells.length * this.option(config.baseItemMainDimension) + (this._cells.length + 1) * itemMargin);
+            const actualContentSize = this._cells.length * this.option(config.baseItemMainDimension) + (this._cells.length + 1) * itemMargin;
+            const containerSize = this._$container[config.mainDimension]();
+
+            if(actualContentSize > containerSize) {
+                this._$container[config.mainDimension](actualContentSize);
+            }
         }
     },
 

diff --git a/testing/tests/DevExpress.ui.widgets/tileView.tests.js b/testing/tests/DevExpress.ui.widgets/tileView.tests.js
@@ -20,6 +20,8 @@ const TILEVIEW_CONTAINER_CLASS = 'dx-tileview-wrapper';
 const TILEVIEW_ITEM_CLASS = 'dx-tile';
 const TILEVIEW_ITEM_SELECTOR = '.' + TILEVIEW_ITEM_CLASS;
 
+const SCROLLVIEW_CONTENT_CLASS = 'dx-scrollview-content';
+
 const DEFAULT_ITEMSIZE = 100;
 const DEFAULT_ITEMMARGIN = 20;
 const DEFAULT_ITEMOFFSET = DEFAULT_ITEMSIZE + DEFAULT_ITEMMARGIN;
@@ -333,6 +335,29 @@ QUnit.module('widget sizing render', () => {
 
         assert.strictEqual($element.outerWidth(), customWidth, 'outer width of the element must be equal to custom width');
     });
+
+    QUnit.test('scrollable content has the correct width if it is larger than the widget', function(assert) {
+        const customWidth = 500;
+        const $element = $('#widget').dxTileView({
+            items: prepareItems(items, configs.horizontal),
+            height: 300,
+            width: customWidth
+        });
+
+        assert.ok($element.find(`.${SCROLLVIEW_CONTENT_CLASS}`).width() > customWidth + 1);
+    });
+
+    QUnit.test('scrollable content has the correct width if it is less than the widget (T860587)', function(assert) {
+        const customWidth = 1500;
+        const $element = $('#widget').dxTileView({
+            items: prepareItems(items, configs.horizontal),
+            height: 600,
+            width: customWidth,
+            rtlEnabled: true
+        });
+
+        assert.roughEqual($element.find(`.${SCROLLVIEW_CONTENT_CLASS}`).width(), customWidth, 1);
+    });
 });
 
 QUnit.module('integration with dataSource', {