Merge pull request #127 from ddincheva/grid-responsivness

Make grid-sample responsive
IgniteUI · Mar 1, 2018 · 825a9ca · 825a9ca
2 parents 9d8fc3c + 7ba76c8
commit 825a9ca
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git a/src/app/grid/grid.component.html b/src/app/grid/grid.component.html
@@ -9,8 +9,8 @@ <h2 class="switch-sample__title" igxLabel>Boston Marathon 2017</h2>
     <input class="gridSample__filter" igxInput type="text" placeholder="Filter by country" (input)="filter($event.target.value)">
   </div>
 
-        <igx-grid #grid1 [data]="localData"  [paging]="true" [perPage]="6" [paginationTemplate]="pager" height="520" width="100%">
-          <igx-column header="Rank" headerClasses="myClass" width="120px" field="Id" sortable="true">
+        <igx-grid #grid1 [data]="localData"  [paging]="true" [perPage]="6" [paginationTemplate]="pager" height="505" width="100%">
+          <igx-column header="Rank" headerClasses="myClass" width="100px" field="Id" sortable="true">
             <ng-template igxCell let-cell="cell">
               <div class="cell__inner">
                 <div>{{ cell.value }}</div>
@@ -35,7 +35,7 @@ <h2 class="switch-sample__title" igxLabel>Boston Marathon 2017</h2>
             </ng-template>
           </igx-column>
 
-          <igx-column field="Name" header="Athlete" filterable="true" width="350">
+          <igx-column field="Name" header="Athlete" filterable="true" width="280">
             <ng-template igxCell let-cell="cell">
               <div class="cell__inner">
                 <igx-avatar [src]="cell.row.rowData.Avatar" roundShape="true" size="small"> </igx-avatar><span class="athlete_name">{{ cell.value }}</span>
@@ -61,7 +61,7 @@ <h2 class="switch-sample__title" igxLabel>Boston Marathon 2017</h2>
             </ng-template>
           </igx-column>
 
-          <igx-column field="TopSpeed" header="Top Speed" >
+          <igx-column field="TopSpeed" header="Top Speed" width="103px">
 
             <ng-template igxCell let-val>
               <div class="cell__inner">
@@ -71,15 +71,15 @@ <h2 class="switch-sample__title" igxLabel>Boston Marathon 2017</h2>
 
           </igx-column>
 
-          <igx-column field="TrackProgress" sortable="true" header="Track Progress" width="300px">
+          <igx-column field="TrackProgress" sortable="true" header="Track Progress" >
             <ng-template igxCell let-val>
               <igx-linear-bar [textVisibility]="false"class="cell__inner_2" [value]="val"></igx-linear-bar>
             </ng-template>
           </igx-column>
 
           <igx-column field="CountryName" hidden="true"></igx-column>
 
-          <igx-column field="CountryFlag" header="Country" width="120px">
+          <igx-column field="CountryFlag" header="Country" width="90px">
             <ng-template igxCell let-cell="cell">
               <div class="cell__inner_2">
                 <span>
@@ -108,4 +108,4 @@ <h2 class="switch-sample__title" igxLabel>Boston Marathon 2017</h2>
           </div>
         </ng-template>
 
-</div>
+</div>
diff --git a/src/app/grid/grid.component.scss b/src/app/grid/grid.component.scss
@@ -24,6 +24,29 @@ $progressBar-sample-theme: igx-progress-linear-theme(
 .grid__wrapper {
   @include igx-grid($grid-sample-theme);
   @include igx-progress-linear($progressBar-sample-theme);
+  width: 1000px;
+  margin: 0 auto;
+}
+
+@media (max-width: 1000px) {
+  .grid__wrapper {
+    width: 98% !important;
+    margin: 0 auto;
+    padding-left: 1%;
+    padding-right: 1%;
+  }
+}
+
+@media (max-width: 720px) {
+  .grid__wrapper {
+    width: 720px !important;
+    margin: 0 3px;
+    padding-right: 5px;
+  }
+}
+
+.sample-column {
+  margin: 0 !important;
 }
 
 .switch-sample__title {