tour step placement bottom-right don t work

[brusand]

I am using the exact versions of the following: Browser: [Chome|Firefox|IE|Safari] Version 58.0.3029.110 (64-bit) AngularJS: "angular": "1.5.5" Angular Bootstrap:" angular-ui-bootstrap": "1.3.3" Angular UI Tour: "angular-ui-tour": "^0.8.1", I have installed this library via: (NPM, Bower, or downloaded package) npm I have observed the following behavior:

when i set popover placement to bottom-right, the arrow is still in the center position but the box is well bottom right align

i observe some flipping

(all go well with bottom and bottom-left placements)

This is how I expected it to behave: i want the arrow display on the top right corner of the popover

Here is my tour config, and all related step configs:

    <div
      ui-tour="welcome"
      ui-tour-popup-class="onboarding"
      ui-tour-template-url="'onboarding.tpl.html'"
      ui-tour-backdrop="true"
      class="collapse navbar-collapse" id="main-menu">

          <div
            tour-step="account"
            tour-step-title="{{'lo.onboarding.configuration.title' | translate }}"
            tour-step-content="{{'lo.onboarding.configuration.description' | translate }}"
            tour-step-placement="bottom-right">
          </div>

Additional notes/code:

i can send you in private a screen capture if you want ? thx Bruno

[benmarch]

Hey Bruno,

Would you mind attaching a screenshot or two? I have included some CSS in the library to accommodate for arrow positioning, so I'm not really sure why it isn't working. A screenshot with the issue, as well as the CSS for the popover and the arrow would be really helpful.

Thanks, Ben

[brusand]

Email me bruno.darrigues@gmail.com, i ll send you à screen captur. :)

[benmarch]

Hey Bruno, I found the issue: Bootstrap is setting the left property of the arrow, and I'm setting the right. I will patch it up and release a new version. In the meantime, you can fix it by setting the following CSS:

.popover.bottom > .arrow {
  left: auto;
}

You might need to add specificity or !important if it doesn't take.

[brusand]

many thx Ben

it works much more better :)

Bruno

2017-06-13 16:43 GMT+02:00 Ben March notifications@github.com:

Hey Bruno, I found the issue: Bootstrap is setting the left property of the arrow, and I'm setting the right. I will patch it up and release a new version. In the meantime, you can fix it by setting the following CSS:

.popover.bottom > .arrow { left: auto; }

You might need to add specificity or !important if it doesn't take.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/benmarch/angular-ui-tour/issues/136#issuecomment-308139449, or mute the thread https://github.com/notifications/unsubscribe-auth/ABknsR9f1SCrBAMQXacn0D8F6Q_Qjgbyks5sDqAVgaJpZM4N26Y5 .

[brusand]

hi Ben,

Sorry but i have still an issue with bottom-right. i add your fixed

.popover.bottom> .arrow { left: auto; }

my html is like this : tour-step account with bottom-right placement is ok

<li cmn-state-active="lo.app.auth.config"

ng-show="!$ctrl.rights.SUPER_ADMIN"> Configuration <div tour-step="account" tour-step-title="{{'lo.onboarding.configuration.title' | translate }}" tour-step-content="{{'lo.onboarding.configuration.description' | translate }}" tour-step-placement="bottom-right">

[benmarch]

This is fixed in 0.8.2.