Interact.js working with bootstrap

[lstasp]

If you have questions about the API that aren't answered in the docs or FAQ, try asking in the Gitter chatroom or on Stackoverflow.

If you've found something that looks like a bug, include a link to a minimal demo on JSFilddle, Codepen with instructions to reproduce the bug with and roughly follow the following issue description format:

Expected behavior

Hi: I would like to know if there is an easy way to get element width translated to bootstrap grid columns and not in pixels, that's why we are using bootstrap in responsive web site.

OR

having snap points adapted to bootstrap columns like:

                        interact.modifiers.snapSize({
                            targets: [
                                { width: 100 },
                                interact.snappers.grid({ width: col-3, height: 100 }),
                                 ]
                        })

I've tried to use col-3 as string in snap points but it doesn't work

Actual behavior

I'm getting resize rect from interact.js, everything works fine

newWidth = rect.width;

But values are in pixels, interact is adding an style tag to my html elements and we are using bootstrap to manage element width like col-3, col-6, col-9, col-12 (elements are part of a bootstrap grid)

System configuration

interact.js version: 1.10.11 Browser name and version: chrome, edge, firefox latest versions Operating System: windows 10

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[taye]

This isn't supported. The grid sizes have to be number of pixels. If you know the size of the grid container, and the padding etc., you can calculate the numbers to pass to the grid function.