Make step to center dynamically when steps are modal with different sizes

[maniboinapally]

I have a scenario to display some modals as steps in between. And those modals are of different width and heights. So I need these steps (modals) displayed in the middle of the screen. It is not working with the below CSS:

.centered-tour-element {
position: fixed;
left: 50%;
top: 50%;
/* The anchor should be translated to the left by half of your step width and half height /
/ For example, if your tour step has dimensions of 280 × 156 px, you have to translate by (-140px, -78px) */
transform: translate(-140px, -78px);
}

The above one might work only for one size. But we have many modals with each modal having different sizes. I have tried various ways, but I want to make this generic.

I have seen that the modal element is updated with the inline style (justifyContent: 'flex-start'). This has to be centered and those styles are not getting updated by using the following code

this.tourService. stepShow $.subscribe(() =>
{
let mainSection = document.querySelector(//modal class name);
mainSection.style.justifyContent = 'center';
});

But the above code is not updating the inline style of the modal. I tried to append the class to the classList. But it only works for the first modal and does not apply to the second modal.

I think the library should provide a way to override the inline style or should be able to add a class as a property while initializing the service for each step. Please provide this feature.

[hakimio]

Instead of justifyContent = 'center', try to update your centered-tour-element transform, based on your tour step size.

[maniboinapally]

We tried that option as well.., as there are many steps with different modal widths... all modals are not coming into the center.

[hakimio]

Were you statically setting translation transform or did you try to calculate what the actual translation should be based on tour step size on tour step show?

[maniboinapally]

I tried to calculate the height and width of the modal in step show., that element is not ready while executing this statement and height and width are defined as 1px. So the modal position is changing some times..

[maniboinapally]

From the developer tools, I have updated align-items as 'center' to the modal and it is working fine then. I think if we give a provision to the user to provide the align-item as a property,
I think the lib should be able to make this modal as flex box and align its items as center as well. So it will fix the issue of different sizes

[hakimio]

You can try sth like setTimeout(() => this.centerStep(), 20).
Anyway, I don't have any plans to implement tour step centering in this library and prefer the step positioning to be handled by 3rd party component library.