tether icon indicating copy to clipboard operation
tether copied to clipboard

Should flipping flip the offsets too?

Open dandv opened this issue 10 years ago • 8 comments

In this configuration, what should happen to the offset if the tether is flipped?

  targetAttachment: 'bottom right',
  targetOffset: '16px 0',
  constraints: [{
    to: 'window',
    attachment: 'together',
  }]

Here's a CodePen demonstrating the issue. I would expect the vertical offset to flip as well, but instead it remains constant:

flip should flip the offsets too

Flipping the offset would be useful if the offset is used to allow for an arrow - the arrow will be flipped, and it needs the space provided by the offset:

flip should flip the offsets too - use case

dandv avatar Jul 21 '15 13:07 dandv

:+1:

adamschwartz avatar Jul 21 '15 13:07 adamschwartz

I agree that tether should handle the flipping of the offset values when the tethered object flips.

Current solution is to avoid using tether offset and use CSS instead.

// LESSCSS
@element-offset: 10px;

.element {    
    &.tether-target-attached-top {
        &.tether-element-attached-bottom {
            margin-top: -@element-offset;
        }
    }

    &.tether-target-attached-bottom {
        &.tether-element-attached-top {
            margin-top: @element-offset;
        }
    }
}

woble avatar Jul 23 '15 10:07 woble

A possible solution without breaking current implementations would be to add relativeOffset and absoluteOffset

ghost avatar Aug 07 '15 09:08 ghost

:+1:

bionicbrian avatar Nov 10 '15 14:11 bionicbrian

:+1:

ghempton avatar Mar 04 '16 21:03 ghempton

Its also possible to update the Tether offset on the fly and reposition manually. Checking the classes you can now where is positioned, top or bottom, and set the offset as negative or positive accordingly.

A more efficient way would be appreacited, though. Wondering why there is no interest in mantaining this project.

miljan-aleksic avatar Jul 05 '16 17:07 miljan-aleksic

@woble CSS solution: problem is here that tether triggers the flip wrong and the element is cropped before it flips.

jonex2 avatar Nov 10 '16 08:11 jonex2

CSS might be good, but I have no idea how to handle case when we have percentage value like this: targetOffset: '50% 0'

sergeylaptev avatar Nov 23 '16 18:11 sergeylaptev