Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #1870006 by nod_, BarisW, alwaysworking, Renrhaf, pk188, andrewmacpherson, ranjith_kumar_k_u, vikashsoni, Gauravmahlawat, wolffereast, Wim Leers, jessebeach, xjm: HTML5 validation with table sticky header is misaligned over the toolbar

merge-requests/721/head
Alex Pott 2021-05-24 12:05:48 +01:00
parent 24494c2e0b
commit 9ec511c812
No known key found for this signature in database
GPG Key ID: 31905460D4A69276
4 changed files with 15 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
core/misc/tableheader.es6.js
View File

@ -208,6 +208,8 @@
* Create the duplicate header. * Create the duplicate header.
*/ */
createSticky() { createSticky() {
// For caching purposes.
this.$html = $('html');
// Clone the table header so it inherits original jQuery properties. // Clone the table header so it inherits original jQuery properties.
const $stickyHeader = this.$originalHeader.clone(true); const $stickyHeader = this.$originalHeader.clone(true);
// Hide the table to avoid a flash of the header clone upon page load. // Hide the table to avoid a flash of the header clone upon page load.
@ -245,6 +247,11 @@
if (typeof offsetLeft === 'number') { if (typeof offsetLeft === 'number') {
css.left = `${this.tableOffset.left - offsetLeft}px`; css.left = `${this.tableOffset.left - offsetLeft}px`;
} }
this.$html.css(
'scroll-padding-top',
displace.offsets.top +
(this.stickyVisible ? this.$stickyTable.height() : 0),
);
return this.$stickyTable.css(css); return this.$stickyTable.css(css);
}, },

2
core/misc/tableheader.js
View File

@ -90,6 +90,7 @@
tableHeight: null, tableHeight: null,
stickyVisible: false, stickyVisible: false,
createSticky: function createSticky() { createSticky: function createSticky() {
this.$html = $('html');
var $stickyHeader = this.$originalHeader.clone(true); var $stickyHeader = this.$originalHeader.clone(true);
this.$stickyTable = $('<table class="sticky-header"></table>').css({ this.$stickyTable = $('<table class="sticky-header"></table>').css({
visibility: 'hidden', visibility: 'hidden',
@ -110,6 +111,7 @@
css.left = "".concat(this.tableOffset.left - offsetLeft, "px"); css.left = "".concat(this.tableOffset.left - offsetLeft, "px");
} }
this.$html.css('scroll-padding-top', displace.offsets.top + (this.stickyVisible ? this.$stickyTable.height() : 0));
return this.$stickyTable.css(css); return this.$stickyTable.css(css);
}, },
checkStickyVisible: function checkStickyVisible() { checkStickyVisible: function checkStickyVisible() {

3
core/modules/toolbar/js/views/ToolbarVisualView.es6.js
View File

@ -86,6 +86,9 @@
$('body').css({ $('body').css({
'padding-top': this.model.get('height'), 'padding-top': this.model.get('height'),
}); });
$('html').css({
'scroll-padding-top': this.model.get('height'),
});
this.triggerDisplace(); this.triggerDisplace();
}, },

3
core/modules/toolbar/js/views/ToolbarVisualView.js
View File

@ -36,6 +36,9 @@
$('body').css({ $('body').css({
'padding-top': this.model.get('height') 'padding-top': this.model.get('height')
}); });
$('html').css({
'scroll-padding-top': this.model.get('height')
});
this.triggerDisplace(); this.triggerDisplace();
}, },
triggerDisplace: function triggerDisplace() { triggerDisplace: function triggerDisplace() {