Description
Hi, I'm trying to use an offset to place the floating element diagonally adjacent to a target with a smaller height (I believe this is important to note).
example:
I believe I'm using the floating ui api correctly (at least, according to their docs) in how I'm setting the offset:
middleware: [
offset(({ rects }) => {
console.log(rects);
return {
alignmentAxis: -rects.floating.height,
};
}),
],
},
However, I am trying to use a custom arrow icon. I am finding that setting a height larger than 16px (the initial shepherd styling for the arrow) causes the floating element's position to jump, such that it is no longer aligned how I would like. This is for a right-end-positioned step.
example (17px height arrow)
I'm wondering if this is a bug in how shepherd is using floating ui or if it's improper usage on my part. If it's something on my end, could I please get some guidance for how to achieve what I want?
In playing around with it, it seems to be some function of the target height vs. the arrow size that causes the floating element to jump. e.g. a 17px arrow on a 24px target will not be positioned correctly, but will be positioned correctly on a 25px target. I don't see why this is, as I would expect the positioning of the floating element to be independent of the size or position of the arrow.
Activity