Hi, I believe this issue is caused by my layout but I have not been able to figure out what specifically is causing the problem. If you have a Stackblitz demo for ngx-ui-tour-ngx-bootstrap I can fork it and try to reproduce the problem.
Anyway, all the tour steps are rendering off screen. I am using ngx-ui-tour-ngx-bootstrap 10.6.0, Angular 15. I can inspect the element and see that the top and left positions are 0 but the browser has an ! symbol and a comment if I hover:
The position: static property prevents top from having an effect. Try setting position to something other than static.
I do not set the position to static anywhere. My index.html is simple.
<!-- Padding to avoid being under navbar --><body class="vh-100" style="padding-top: 3.9rem"><app-root></app-root><app-redirect></app-redirect></body></html>
Hi, I believe this issue is caused by my layout but I have not been able to figure out what specifically is causing the problem. If you have a Stackblitz demo for ngx-ui-tour-ngx-bootstrap I can fork it and try to reproduce the problem.
Anyway, all the tour steps are rendering off screen. I am using ngx-ui-tour-ngx-bootstrap 10.6.0, Angular 15. I can inspect the element and see that the top and left positions are 0 but the browser has an ! symbol and a comment if I hover:
The position: static property prevents top from having an effect. Try setting position to something other than static.I do not set the position to static anywhere. My index.html is simple.
<html lang="en" translate="no" style="min-height: 100vh"><head><meta charset="utf-8" /><base href="/" /><meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="icon" type="image/x-icon" href="favicon.ico" /></head><!-- Padding to avoid being under navbar --><body class="vh-100" style="padding-top: 3.9rem"><app-root></app-root><app-redirect></app-redirect></body></html>and then my app component is roughly this
<nav class="navbar yada yada">...</nav><main class="h-100 w-100"><tour-step-template><ng-template let-step="step"><div class="pb-2">{{ step?.content }}</div><div class="tour-step-navigation d-flex justify-content-between"><div class="hstack gap-2"><button class="btn btn-primary btn-sm" [disabled]="!tourService.hasPrev(step)" (click)="tourService.prev()"><em class="fa-solid fa-angles-left"></em> {{ step?.prevBtnTitle }}</button><button class="btn btn-primary btn-sm" [disabled]="!tourService.hasNext(step)" (click)="tourService.next()">{{ step?.nextBtnTitle }} <em class="fa-solid fa-angles-right"></em></button></div><button class="btn btn-secondary btn-sm" (click)="tourService.end()">{{ step?.endBtnTitle }}</button></div></ng-template></tour-step-template>I guessing the problem has something to do with my layout setting the height to 100 but If I remove the styling the steps are still offscreen.
Sorry I don't have more initial info, but I'm hoping you might have an idea on the root cause. Thank you