Positioning when screen size is too small

[albert-luta]

Hi, is there a way to change the default positioning of center when the screen size is smaller than the one's of Tour?

This is how it looks when the screen size is bigger:

This is how it looks when the screen size is too small(ex: on the mobile, when the virtual keyboard is open):

I would want the input/the top part to be in the view:

[LordA98]

Hey @lutaalbert, did you find a solution to this?

I'm experiencing something similar now.

[albert-luta]

Hey @LordA98 ,(disclaimer: didn't work with reactour in almost 1y now and don't have access to that project repo anymore) from what I remember I had been tinkering with the style property of that specific step if the window height was smaller than my component, but I don't know exactly what I changed. I looked through the styling reactour was applying(to understand how it positioned elements in the page) and had overwritten them to my liking.

I'm sorry that I can't help you with more information(it's been a long time since), good luck!

[farrukhayazqazi]

@elrumordelaluz any updates?

[alejandrotrigo]

what about this? :smiley:

[elrumordelaluz]

Mind creating a minimal reproduction in a sandbox in order to allow others to debug your use-case and try to find a solution? Thanks!

[PrathipaSoundarajan]

I want to place the tour popup sticking to some position even though there is no space in the right/left/top/bottom. If not at least the popup to be at the center of the highlighted content irrespective of screen sizes. It should not automatically change position. Anyway to control this behavior?

[elrumordelaluz]

I want to place the tour popup sticking to some position even though there is no space…

Did you tried passing a position prop global or local?