How to change the Margin of Shepherd Step without using Offset and FloatingUIOption

[mvksages]

I was trying to change the margin:0px to 20px from Tour.When.show() method - however it does not reflect. We are using Shepherd.js in a legacy project which does not need additional offset object for making the margin change.

Is there anyway I can achieve this ? Below is the example code

        createTourObj: function () {
            const tour = new Shepherd.Tour({
                useModalOverlay: true,
                defaultStepOptions: {
                    //floatingUIOptions: {middleware: [offset({ mainAxis: 64, crossAxis: 12 })]},
                    when: {
                        show() {
                            // This is where I was trying to modify the style... Its NOT working.           
                            const currentStepElement = tour.currentStep.el;
                            currentStepElement.style['margin'] = "20px"
                        }
                    }
                }
            });

            return tour;
        },

[mvksages]

Even if its possible to create a dummy offset object inline in the javascript method that would be great as well. This is for legacy project with vanilla javascript libraries pulled as a file and no NPM or CDN.

[RobbieTheWagner]

The offsets are part of floating UI, so you'll have to use their offset to do it. I imagine they have a way to include it globally, rather than import it.

[mvksages]

Thanks for your response @RobbieTheWagner ,

Let me reachout to floatingUI library or if anyone have a sample example that should also help. Even if it means to have it as part of the window object like window.offset. I can use this in our code during the site tour as well.

We are unable to use the import as mentioned earlier, Working on Legacy project with plain vanilla JS libraries. Even CDN are downloaded into specific folders for shepherd.js to use it for site tour.

[mvksages]

I was able to bring CDN file into our page using CDN: https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/dist/floating-ui.core.umd.js

However the floatingUIOption is not affecting anything on the dialog. Below is the code. If we are not using Import. Is there a way we can relate or connect the offset object with the Step appearing on the screen somehow ? (Sorry for the trouble if its confusing. )

        createTourObj: function () {
            const tour = new Shepherd.Tour({
                useModalOverlay: true,
                confirmCancel: true,
                confirmCancelMessage: 'Are you sure ? you want to exit the Tour?',

                defaultStepOptions: {
                    scrollTo: true,
                    exitOnEsc: true,
                    keyboardNavigation: true,
                    floatingUIOptions: { middleware: [FloatingUICore.offset({ mainAxis: 100, crossAxis: 100 })]},
                }
            });

            return tour;
        },

THe page shows module as mentioned below
<script type="module" src="[https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/dist/floating-ui.core.umd.js](view-source:https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/dist/floating-ui.core.umd.js)"></script></head>

[LordRembo]

I'm having a similar issue to this. @mvksages did you ever find a workaround for the floatingUIOption offset not working?

[LordRembo]

In the docs, I found the reference should be window.FloatingUIDOM, but that also doesn't work for my case.

[mvksages]

Its not possible to have a workaround. Finally I had to try a different library like https://driverjs.com/

[RobbieTheWagner]

Why not just import offset? You can do imports in <script type="module">

[lonix1]

What about folks using the CDN option, how would we do it?

[RobbieTheWagner]

@lonix1 you should still be able to do it with <script type="module">. Perhaps we should reexport it for ease of importing.