Skip to content
This repository has been archived by the owner on Feb 12, 2022. It is now read-only.

Add thead rule for consistent calculations of sticky header in repeater list #2026

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

swilliamset
Copy link
Contributor

thead tags css display attribute defaults to 'table-row-group'. 'table-row-group' has no specification on the default height. In chrome the height is based on the content. In firefox and IE the height is based on the table container. Repeater list relies on the thead to calculate size of sticky headers. To have consistent heights across browsers the display attribute can be set to 'block' so that the height is consistently defined based on content (like chrome).

This bug is seen in firefox and ie as the header growing to large because of the height of the div inside of the header being about the same size as the table and overlapping the content.

Be sure to use ?w=1 when looking at the styles because the new nesting introduced a lot of whitespace changes.

Delat sans whitespace:

Author: Stephen Williams <[email protected]>
Date:   Thu Nov 9 12:24:59 2017 -0500

    add thead rule for consistent calculations of sticky header in repeater list

diff --git a/less/repeater-list.less b/less/repeater-list.less
index 6f3f416e..a3eef026 100755
--- a/less/repeater-list.less
+++ b/less/repeater-list.less
@@ -129,7 +129,14 @@
                                                }
                                        }

-                                       thead > tr > th {
+                                       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;
@@ -177,6 +184,8 @@
                                                                visibility: hidden;
                                                        }
                                                }
+
+                                       }
                                }

                                &-check {

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants