Wrong positioning

[thomasthiebaud]

I have some positioning problem using the latest version of the library. This code

const driver = new Driver({ padding: 0 });
driver.defineSteps([{
  element: '#company-profile-display-name-input',
  popover: {
    title: 'Title on Popover',
    description: 'Body of the popover',
    position: 'top',
  },
}]);
driver.start();

with this html elements

<div class="row">
  <div class="large-12 columns">
    <label>
      {{"b2bsettingsapp.companysettings.information.form_settings_displayname" | translate }}
      <input
        id="company-profile-display-name-input"
        type="text"
        ng-model="businessUnitDetails.displayName"
        strip-html
      />
    </label>
  </div>
</div>

render like this

If I inspect the styles, there are correctly applied (not override by something else), but the top value seems wrong

[kamranahmedse]

hey thomas, could you possibly create a reproducing plunker or share any public link?

[thomasthiebaud]

I will try to do that. I found that the positioning is wrong until I resize the window. Once I resize it, everything looks ok

[thomasthiebaud]

I found out why. It is an angular problem not related with the library

Starting driver once the DOM has finished rendering using this piece of code solved it.

$timeout(function () {
  //DOM has finished rendering
  driver.start();
});

[Juanperezc]

I have exactly de same problen with ionic 3 , the top position is wrong but when I click the popover ,
this seems to be arranged