How to make the popup display below the target control

[IainmXray]

Great component. When using it near the edge of a display area (e.g. on a popup window) having it popup above the target control causes it to be hidden. Is there any way we can control the popup direction relative to the target control as you can with the bootstrap Tooltip (https://getbootstrap.com/docs/3.3/javascript/#tooltips-examples) ?

Thanks

[ckosloski]

Did you try adding popover-placement="bottom" ?

[IainmXray]

Thanks for the reply. Yes I have tried that. Example usage:

<a href="" popover-placement="bottom" editable-text="editCtrl.sourceValue"
   class="editable editable-click" onbeforesave="editCtrl.IsValueValid($data)"
   onaftersave="editCtrl.OnAfterSave()">{{ editCtrl.sourceValue || "empty" }}</a>

The tag has no effect.

[ckosloski]

That doesn't look right. Which popover are you trying to use? Editable Popover or Bootstrap UI Popover

Using the Boostrap UI Popover, adding the popover-placement works for me

<div ng-controller="UiPopoverCtrl" id="UiPopoverCtrl">
  <div class="ui-popover-wrapper">
    <a href="#"
       id="simpleText"
       editable-text="user.name"
       e-label="User Name"
       uib-popover-template="'popover.html'"
       popover-is-open="popoverIsOpen"
       popover-append-to-body="true"
       onshow="popoverIsOpen = !popoverIsOpen"
       onhide="popoverIsOpen = !popoverIsOpen"
       popover-placement="bottom"
       popover="true">{{ user.name || 'empty' }}</a>
  </div>
</div>

[IainmXray]

I am using the Editable popover which is working in every way but does not respond to popover-placement. I will investigate further.