fix styling issue, sort icon not showing when grid has no scroll

Author: Ghislain Beaulac

.editorconfig

@@ -1,13 +1,18 @@
-# Editor configuration, see http://editorconfig.org
+# http://editorconfig.org
 root = true
 
 [*]
 charset = utf-8
+end_of_line = lf
 indent_style = space
-indent_size = 2
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 
+[*.{js,json,ts}]
+indent_style = space
+indent_size = 2
+
 [*.md]
-max_line_length = off
+max_line_length = 0
 trim_trailing_whitespace = false

src/app/modules/angular-slickgrid/styles/_variables.scss

@@ -6,8 +6,8 @@
 
 /* SlickGrid Bootstrap variables */
 /* Used by slick-bootstrap.scss */
-$border-color:                          #dddddd !default;
-$font-size-base:          			        14px !default;
+$border-color:                        #dddddd !default;
+$font-size-base:          			    14px !default;
 $font-family:                           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
 
 /* Slickgrid container, including headers but excluding pagination */
@@ -19,8 +19,8 @@ $container-border-left:                 0 none !default;
 /* grid */
 $grid-border-color:                     fade(black, 3%) !default;
 $grid-border-style:                     solid !default;
-$grid-header-background:                rgba(255, 255, 255, .6) !default;
-$grid-cell-color:                       rgb(255, 255, 255) !default;
+$grid-header-background:              rgba(255, 255, 255, .6) !default;
+$grid-cell-color:                     rgb(255, 255, 255) !default;
 
 /* cell */
 $cell-border-top:                       1px solid $border-color !default;
@@ -30,7 +30,7 @@ $cell-border-left:                      0 none !default;
 $cell-odd-background-color:             darken($grid-cell-color, 2.5%) !default;
 $cell-odd-active-background-color:      darken($grid-cell-color, 5%) !default;
 $cell-padding:                          5px 7.5834px !default;
-$selected-hover-color:                  rgb(245, 245, 204) !default;
+$selected-hover-color:                rgb(245, 245, 204) !default;
 
 /* cell default slickgrid values */
 $cell-padding-top:                      4px !default;
@@ -42,42 +42,42 @@ $cell-padding-left:                     4px !default;
 $header-input-height:                   27px !default;                        // height of the filter form element (input, textarea, select)
 $header-input-width:                    100% !default;                        // width of the filter form element (input, textarea, select)
 $header-input-padding:                  0 6px !default;                       // padding of the filter form element (input, textarea, select)
-$header-row-background-color:           #ffffff !default;
+$header-row-background-color:         #ffffff !default;
 $header-row-count:                      2 !default;                           // how many rows to display on the header
 $header-column-height:                  (16px * $header-row-count) !default;  // header is calculated by rows to show
 $header-border-top:                     0 none !default;
 $header-border-right:                   0 none !default;
 $header-border-bottom:                  0 none !default;
 $header-border-left:                    0 none !default;
 $header-resizable-hover:                1px solid #d0d0d0 !default;
-$header-scroll-width-to-remove:         18px !default;                        // without this, the header (which doesn't have scrolling) will be wider than the data viewport
+$header-scroll-width-to-remove:         16px !default;                        // without this, the header (which doesn't have scrolling) will be wider than the data viewport
 
 /* icon font is using Font-Awesome by default but could be changed to any other icon package like Glyphicons, ... */
 $icon-font-family:                      "FontAwesome" !default;               // or Glyphicons Halflings */
 $icon-font-size:                        14px !default;
 $icon-sort-asc:                         "\f0d8" !default;
 $icon-sort-desc:                        "\f0d7" !default;
-$icon-sort-color:                       rgb(76, 128, 190) !default;
+$icon-sort-color:                     rgb(76, 128, 190) !default;
 $table-background:                      transparent !default;
 $container-border:                      0px solid $border-color !default;
-$link-color:        				            #08c !default;
+$link-color:        				  #08c !default;
 $link-color-hover:                      darker($link-color, 15%) !default;
-$table-bg-accent: 					            #f9f9f9 !default; // for striping every second row
-$gray-dark:              			          #333 !default;
-$text-color:             			          $gray-dark !default;
-$navbar-default-link-hover-color:	      $gray-dark !default;
+$table-bg-accent: 					  #f9f9f9 !default; // for striping every second row
+$gray-dark:              			  #333 !default;
+$text-color:             			    $gray-dark !default;
+$navbar-default-link-hover-color:	    $gray-dark !default;
 
 /* Column picker */
-$column-picker-background-color:        #f8f8f8 !default;
+$column-picker-background-color:      #f8f8f8 !default;
 $column-picker-border:                  1px solid #b8b8b8 !default;
 $column-picker-border-radius:           3px !default;
 $column-picker-close-background-color:  1px solid #9c9c9c !default;
 $column-picker-close-border:            1px solid #9c9c9c !default;
 $column-picker-close-opacity:           0.9 !default;
 
 /* pagination variables */
-$pagination-button-hover-color:         #E6E6E6 !default;
-$pagination-border-color:               #ddd !default;
+$pagination-button-hover-color:       #E6E6E6 !default;
+$pagination-border-color:             #ddd !default;
 $pagination-icon-seek-first:            "\f100" !default;
 $pagination-icon-seek-end:              "\f101" !default;
 $pagination-icon-seek-next:             "\f105" !default;
@@ -88,4 +88,4 @@ $pagination-border-top:                 0 none !default;
 $pagination-border-right:               0 none !default;
 $pagination-border-bottom:              0 none !default;
 $pagination-border-left:                0 none !default;
-$pagination-text-color:                 #808080 !default;
+$pagination-text-color:               #808080 !default;

src/app/modules/angular-slickgrid/styles/slick-bootstrap.scss

@@ -99,7 +99,7 @@
     border-right: $header-border-right;
     border-bottom: $header-border-bottom;
     border-left: $header-border-left;
-    width: calc(100% - #{$header-scroll-width-to-remove});
+    width: 100%;
   }
 
   .slick-headerrow-columns {
@@ -123,6 +123,7 @@
 
   .slick-header-columns {
     background: $table-background;
+    width: calc(100% - #{$header-scroll-width-to-remove});
 
 
     .slick-header-sortable {