Tether not working?
basementmedia2 opened this issue · 2 comments
The following code shows the green and the yellow box as in the example.
But shouldn't the boxes stay connected, when the text in the div id="test2" are edited.
when i add linebreaks to the test2 div the green box is moved downwards while the yellow stays in place.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
.element {
width: 200px;
height: 200px;
background-color: #fe8;
position: absolute;
z-index: 6;
}
.target {
width: 300px;
height: 50px;
margin: 0 35%;
background-color: #4e9;
}
</style>
</head>
<body>
<div class="instructions">Resize the page to see the Tether flip.</div>
<div id="editableblock" contenteditable="true">Hier steht Text</div>
<div id="textblock" class="element"></div>
<div id="imageblock" class="target"></div>
<script src="//github.hubspot.com/tether/dist/js/tether.js"></script>
<script>
new Tether({
element: '#textblock',
target: '#imageblock',
attachment: 'top left',
targetAttachment: 'top right',
});
</script>
</body>
</html>
Any suggestions why the code doesnt work?
By the way: Is it ok to declare element and target with the div id instead of the class?
Best regards
Daniel
I think the issue here is we only reposition the tether on scroll or resize, so changing the size of the editable div is not triggering the tether recalculation. We should look into this, but in general it might not work well to listen to all types of events to reposition.
@basementmedia2 you will have to manually call position, as per the docs, to update the position http://tether.io/overview/repositioning/