Position/Alignment of movable box

[contd]

When I setup this to work with a list of image thumbnails on my page, the movable blue box is below the images. Attached is a screenshot of what it looks like.

[nastefan]

@contd I have the same issue, did you find the reason?

[stefanaz]

Parent element should has position: relative;

[probil]

@contd could you check workaround provided by @stefanaz ?
It would be nice if you can make a Minimal Reproduction of the bug on codesandbox/jsfiddle/codepen or whatever you like

[lynmije]

have you find solution on this issues? @contd @probil

[lynmije]

@probil i have also encountered this issue. Attached below is the screenshots

[stefanaz]

@lynmije try to play with margin-top of your container and position:relative/absolute;

[ibadass]

Hi,
I have the same problem, I use Vue Material and I think that is the source of this issue (CSS Framework).
Do I have to add position: relative on each parents ?
Thanks

[probil]

@ibadass It depends on how you've implemented that. 🤔
If you have Moveable in few unrelated places - yeah, you should have position: relative on each exiting parent wrapper.

If you have few related Moveable instances in one place (see screenshot of contd about) you can have just one parent with position: relative

I don't think CSS framework is an issue - you can always add one more wrapper with position: relative 😉

I mean

<div class="framework-specific-class">
   <Movable />
</div>

can be

<div class="framework-specific-class">
   <div class="moveable-wrapper"> <!-- class with position: relative -->
     <Movable />
   </div>
</div>

[ibadass]

@probil Thank you for your answer, I understand.
Here is a codesandbox in order to understand my problem and maybe find a solution...

[probil]

@ibadass You need to pass container ref as a prop to <Moveable>:

     <div class="container" ref="container"> <!-- here -->
            <Moveable
              class="moveable"
              v-model="row.key"
              v-bind="moveable"
              :container="$refs.container" <!-- here -->
              @drag="handleDrag"
              @resize="handleResize"
              @scale="handleScale"
              @rotate="handleRotate"
              @warp="handleWarp"
              v-for="(row, index) in rows"
              :key="index"
            >
              <span>Vue Moveable</span>
            </Moveable>
          </div>

https://codesandbox.io/s/vue-material-also-works-on-the-right-side-j5psx

[probil]

I think this should help other guys (like @contd ) as well

[ibadass]

@probil Thanks, it works great !
Just a thing, in my example, : when I create 2 shapes and rotate the first one, it moves and copy "automatically" the other.

[probil]

@ibadass I saw that. It's because you are using one $frame object.
In the latest version of the library you can get rid of $frame completely. Check examples in repo

[ibadass]

@probil Thank you ! It's almost perfect !
I delete the $frame object but now, when I resize then rotate, the moveable object is deformed.

[akinhwan]

I had the same issue and added position:relative like suggested above. Not using vue material though. Just trying to get the bounding controls to show up around my images on load.

Currently the bounding controls only surround the image like I want, once I click on the image.
Could be because I'm looping through and using slots to have many images loaded with moveable component.

[probil]

Is the issue still relevant? 🤔

[stefanaz]

same as #86 issue

[andreasvirkus]

@probil could you update moveable dependency to 0.13.1? I think they just fixed a similar issue:
daybrush/moveable#98

renovate bot also has a PR for this: #87

Edit: tested and it seems to work fine on the latest version

[probil]

@andreasvirkus sure

[probil]

@andreasvirkus moveable updated to 0.13.4

---

Closing because of inactivity. Create a new issue if you have any other questions / issues