chore(*): updating more samples

Author: ChronosSF

src/app/hierarchical-grid/column-selection/hierarchical-grid-column-selection.component.html

@@ -3,7 +3,7 @@
         [columnSelection]="currentColumnSelection">
         <igx-grid-toolbar>
 
-            <igx-select [(ngModel)]="currentColumnSelection">
+            <igx-select [(ngModel)]="currentColumnSelection" [displayDensity]="'compact'">
                 <label igxLabel>Column Selection</label>
                 <igx-select-item value="none">None</igx-select-item>
                 <igx-select-item value="single">Single</igx-select-item>

src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.html

@@ -49,7 +49,7 @@
     <div class="options-container">
         <label>Display density:</label>
         <div class="select-input">
-            <igx-select [(ngModel)]="hGrid.displayDensity">
+            <igx-select [(ngModel)]="hGrid.displayDensity" [displayDensity]="'compact'">
                 <igx-select-item *ngFor="let density of densityOptions" [value]="density">
                     {{ density }}
                 </igx-select-item>

src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.scss

@@ -10,7 +10,7 @@ igx-switch {
 .options-container {
     display: flex;
     flex-direction: row;
-    align-items: baseline;
+    align-items: center;
     padding: 0 1rem;
 }
 .options_container * { margin-right: 15px; }

src/app/scheduling/datepicker/reactive-form/reactive-form.component.scss

@@ -6,14 +6,14 @@
 .form-group {
     display: flex;
     flex: 1;
-    width: 400px;
+    width: 450px;
 }
 
 .form-date-picker {
-    flex: 55%;
+    flex: 50%;
 }
 
 .form-time-picker {
-    flex: 45%;
+    flex: 50%;
     margin-left: 16px;
 }

src/app/services/localization-samples/localization-all-resources/localization-all-resources.component.html

@@ -13,7 +13,7 @@
         <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [groupable]="true">
         </igx-column>
     </igx-grid>
-    <igx-select [(ngModel)]="locale" (ngModelChange)="updateLocale()">
+    <igx-select [(ngModel)]="locale" (ngModelChange)="updateLocale()" [displayDensity]="'compact'">
         <igx-select-item *ngFor="let locale of selectLocales" [value]="locale">
             {{ locale }}
         </igx-select-item>

src/app/services/localization-samples/localization-all-resources/localization-all-resources.component.scss

@@ -1,4 +1,5 @@
 igx-select {
+    margin-top: 10px;
     width: 192px;
 }
 

src/app/tree-grid/column-selection/tree-grid-column-selection.component.html

@@ -8,7 +8,7 @@
                     [columnSelection]="currentColumnSelection">
         <igx-grid-toolbar>
 
-            <igx-select [(ngModel)]="currentColumnSelection">
+            <igx-select [(ngModel)]="currentColumnSelection" [displayDensity]="'compact'">
                 <label igxLabel>Column Selection</label>
                 <igx-select-item value="none">None</igx-select-item>
                 <igx-select-item value="single">Single</igx-select-item>

src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.html

@@ -36,7 +36,7 @@
     <div class="options-container">
         <label>Display density:</label>
         <div class="select-input">
-            <igx-select [(ngModel)]="treegrid1.displayDensity">
+            <igx-select [(ngModel)]="treegrid1.displayDensity" [displayDensity]="'compact'">
                 <igx-select-item *ngFor="let density of densityOptions" [value]="density">
                     {{ density }}
                 </igx-select-item>

src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.scss

@@ -10,7 +10,7 @@ igx-switch {
 .options-container {
     display: flex; 
     flex-direction: row; 
-    align-items: baseline; 
+    align-items: center; 
     padding: 0 1rem;
 }
 .options_container * { margin-right: 15px; }

src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.html

@@ -13,6 +13,7 @@
                 <igx-simple-combo #comboItem
                     [data]="sortingTypes"
                     [displayKey]="'mode'"
+                    [displayDensity]="'compact'"
                     [(ngModel)]="sortingOptions"
                     (keydown)="handleSearchResults($event)">
                     <ng-template igxComboClearIcon></ng-template>