From 9652a4f4763eb17de99a5ccd3e11132a1ca465e3 Mon Sep 17 00:00:00 2001
From: Stephen Williams <stephenwilliams@salesforce.com>
Date: Thu, 9 Nov 2017 12:24:59 -0500
Subject: [PATCH] add thead rule for consistent calculations of sticky header
 in repeater list

---
 less/repeater-list.less | 81 +++++++++++++++++++++++------------------
 1 file changed, 45 insertions(+), 36 deletions(-)

diff --git a/less/repeater-list.less b/less/repeater-list.less
index 6f3f416e4..a3eef0260 100755
--- a/less/repeater-list.less
+++ b/less/repeater-list.less
@@ -129,53 +129,62 @@
 						}
 					}
 
-					thead > tr > th {
-						background: @gray98;
-						border-bottom: 1px solid @gray87;
-						border-left: 1px solid transparent;
-						border-top: none;
-						color: fade(@true-black, 0);	// transparent
-						line-height: 1.42857;
-						padding: 8px;
-
-						#fuelux > .no-selection-allowed();
-
-						&:first-child {
-							border-left: none;
-							.header-checkbox {
-								width: @mutli-select-enabled-width;
-								padding-left: 12px;
+					thead {
+						// thead display defaults to 'table-row-group'
+						// 'table-row-group' has no specification on the default height
+						// fuelux relies on the thead to calculate size of sticky headers
+						// to have consistent heights across browsers resetting to block
+						display: block;
+
+						> tr > th {
+							background: @gray98;
+							border-bottom: 1px solid @gray87;
+							border-left: 1px solid transparent;
+							border-top: none;
+							color: fade(@true-black, 0);	// transparent
+							line-height: 1.42857;
+							padding: 8px;
 
-								.checkbox-inline:before {
-									top: 0;
+							#fuelux > .no-selection-allowed();
+
+							&:first-child {
+								border-left: none;
+								.header-checkbox {
+									width: @mutli-select-enabled-width;
+									padding-left: 12px;
+
+									.checkbox-inline:before {
+										top: 0;
+									}
 								}
 							}
-						}
 
-						&.sortable {
-							&:hover, &.sorted {
-								background: @selectable-hover;
-								cursor: pointer;
-								#fuelux > .vertical(@start-color: @gray98; @end-color: @gray90);
+							&.sortable {
+								&:hover, &.sorted {
+									background: @selectable-hover;
+									cursor: pointer;
+									#fuelux > .vertical(@start-color: @gray98; @end-color: @gray90);
+								}
+							}
+
+							&.sorted {
+								span.glyphicon {
+									display: block;
+									visibility: hidden;
+								}
 							}
-						}
 
-						&.sorted {
 							span.glyphicon {
-								display: block;
-								visibility: hidden;
+								display: none;
+								float: right;
+								margin-top: 2px;
 							}
-						}
 
-						span.glyphicon {
-							display: none;
-							float: right;
-							margin-top: 2px;
+							.actions-hidden {
+								visibility: hidden;
+							}
 						}
 
-						.actions-hidden {
-							visibility: hidden;
-						}
 					}
 				}