In Salesforce Lightning Experience (LEX), the document body height is always 0px and full window scroll is not being used. Instead, the content of each "page" the user navigates to within LEX is placed into a scrollable div.
This messes up position calculation and makes some components unusable. For instance, the date picker's month and year selectors are shifted off screen making month/year label simply disappear on mouse hover.
I have sucessfully worked around this issue by creating the following override but wanted to validate whether this is the correct approach or is there anything else I could do to improve it?
class RectangleOverride {
static get target() {
return {
class: Rectangle,
};
}
/**
* @override Core/helper/util/Rectangle.from()
*/
static from(element, relativeTo, ignorePageScroll) {
const result = this._overridden.from.call(this, ...arguments);
if (element === document.body) {
// In LEX, the document.body height is always 0px
// which messes up relative position calculations.
result.height = window.innerHeight;
}
return result;
}
}
Hi Aleksei,
we just got this issue fixed for LWC for the upcoming 4.1.0 release. You got right to the reason of the failure - our code doesn't handle body with 0 height. Override looks correct and safe.
Stay tuned, we got more good news coming about LWC support
When the Grid is placed inside of a Lightning "modal dialog", its column header context menus are displayed off point, making them unusable.
This is because one of the modal dialog component's elements has 'slds-modal__container' class which applies translate(0, 0) transformation, effectively shrinking the .b-float-root element horizontally. This confuses menu positioning as it is relative to the float root yet the click point is relative to the window.
The following override resolves the issue (for us).
const getWidgetHost = () => getLWCElement().firstChild;
const getFloatRoot = () => getWidgetHost().querySelector('.b-float-root');
class RectangleOverride {
static get target() {
return {
class: Rectangle,
};
}
/**
* @override Rectangle.prototype.alignTo()
*/
alignTo(spec) {
const { constrainTo } = spec;
const result = this._overridden.alignTo.call(this, spec);
if (constrainTo === window || constrainTo === document) {
const { x } = Rectangle.from(getFloatRoot());
// Compensate for the position shift
// caused by slds-modal__container's
// CSS transform: translate(0, 0);
result.translate(-x, 0);
}
return result;
}
}
