Merge branch 'master' into rkaraivanov/grid-clipboard-master

Author: zdrawku

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -1218,7 +1218,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
 
     private _getItemSize(item, dimension: string): number {
         const dim = item[dimension];
-        return typeof dim === 'number' ? dim : this.igxForItemSize;
+        return typeof dim === 'number' ? dim : parseInt(this.igxForItemSize, 10) || 0;
     }
 }
 

src/app/virtual-for-directive/virtual-for.sample.css

@@ -0,0 +1,7 @@
+.overflowContainer > .igx-display-container {
+    overflow: visible !important;
+}
+.overflowContainer  {
+    position: relative;
+    overflow: hidden;
+}

src/app/virtual-for-directive/virtual-for.sample.html

@@ -25,17 +25,19 @@
             <table>
                 <tbody style='display:grid;'>
                 <tr style='width:500px; height:100px;'>
-                    <div style='position: relative; overflow: hidden'>
+                    <div class='overflowContainer'>
                         <ng-template igxFor let-item [igxForOf]="data" #virtDirHorizontal
                             [igxForScrollOrientation]="'horizontal'"
                             [igxForContainerSize]='"500px"'
+                            [igxForItemSize]='"200px"'
                             let-rowIndex="index">
-                                <td  [style.width.px]='item.width' [style.min-width.px]='item.width' style='height:100px;'>{{rowIndex}} : {{item.text}}</td>
+                                <td  [style.width.px]='200' [style.min-width.px]='200' style='height:100px;'>{{rowIndex}} : {{item.text}}</td>
                         </ng-template>
                     </div>
                 </tr>
                 </tbody>
             </table>
+            <br/>
             <button (click)="scrNextCol()">Scroll Next Column</button>
             <button (click)="scrPrevCol()">Scroll Prev Column</button>
             <button (click)="scrNextHorizontalPage()">Scroll Next Horizontal Page</button>

src/app/virtual-for-directive/virtual-for.sample.ts

@@ -1,11 +1,16 @@
-import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
+import { Component, ElementRef, ViewChild, Injectable, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { Http } from '@angular/http';
 import { IgxForOfDirective } from 'igniteui-angular';
 import { RemoteService } from '../shared/remote.service';
 
 
 @Component({
     selector: 'app-virt-for-sample',
-    templateUrl: 'virtual-for.sample.html'
+    templateUrl: 'virtual-for.sample.html',
+    styleUrls: ['virtual-for.sample.css'],
+    encapsulation: ViewEncapsulation.None
 })
 export class VirtualForSampleComponent implements OnInit, AfterViewInit {
     search1: string;
@@ -50,7 +55,6 @@ export class VirtualForSampleComponent implements OnInit, AfterViewInit {
             link: '#',
             phone: '770-504-2217',
             text: 'Terrance Orta',
-            width: 100,
             height: 100
         }, {
             key: 2,
@@ -59,7 +63,6 @@ export class VirtualForSampleComponent implements OnInit, AfterViewInit {
             link: '#',
             phone: '423-676-2869',
             text: 'Richard Mahoney',
-            width: 200,
             height: 200
         }, {
             key: 3,
@@ -68,7 +71,6 @@ export class VirtualForSampleComponent implements OnInit, AfterViewInit {
             link: '#',
             phone: '859-496-2817',
             text: 'Donna Price',
-            width: 300,
             height: 300
         }, {
             key: 4,
@@ -77,7 +79,6 @@ export class VirtualForSampleComponent implements OnInit, AfterViewInit {
             link: '#',
             phone: '901-747-3428',
             text: 'Lisa Landers',
-            width: 200,
             height: 200
         }, {
             key: 5,
@@ -86,7 +87,6 @@ export class VirtualForSampleComponent implements OnInit, AfterViewInit {
             link: '#',
             phone: '573-394-9254',
             text: 'Dorothy H. Spencer',
-            width: 200,
             height: 200
         }, {
             key: 6,
@@ -95,7 +95,6 @@ export class VirtualForSampleComponent implements OnInit, AfterViewInit {
             link: '#',
             phone: '323-668-1482',
             text: 'Stephanie May',
-            width: 100,
             height: 100
         }, {
             key: 7,
@@ -104,7 +103,6 @@ export class VirtualForSampleComponent implements OnInit, AfterViewInit {
             link: '#',
             phone: '401-661-3742',
             text: 'Marianne Taylor',
-            width: 100,
             height: 100
         }, {
             key: 8,
@@ -113,7 +111,6 @@ export class VirtualForSampleComponent implements OnInit, AfterViewInit {
             link: '#',
             phone: '662-374-2920',
             text: 'Tammie Alvarez',
-            width: 300,
             height: 300
         }, {
             key: 9,
@@ -122,7 +119,6 @@ export class VirtualForSampleComponent implements OnInit, AfterViewInit {
             link: '#',
             phone: '240-455-2267',
             text: 'Charlotte Flores',
-            width: 200,
             height: 200
         }, {
             key: 10,
@@ -131,7 +127,6 @@ export class VirtualForSampleComponent implements OnInit, AfterViewInit {
             link: '#',
             phone: '724-742-0979',
             text: 'Ward Riley',
-            width: 100,
             height: 100
         }];
         for (let i = 10; i < 1e5; i++) {