CODEWITHSUNDEEP
angularjstwitter-bootstrapangular-ui-bootstrappopover
UltraSonja
UltraSonja

Reputation: 891

BootstrapUI: Popover cut off by page end

These are AngularUI Bootstrap popovers, which are written in Angular instead of jQuery.

I have a popover in a plnkr that is working, but it's positioning is messed up. It is being cut in half by the page.

enter image description here

When I inspect the popover's CSS, I see some code which doesn't make any sense to me. I understand what it's doing, but where are these element.style properties coming from? They seem to be the problem.

element.style {
  top: -139px;
  left: 112px;
  display: block;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: none;
  max-width: 276px;
  padding: 1px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
  line-break: auto;
}

There isn't even a scroll option available. Is there a way to position a popover so that the entirety of it appears on the page, regardless of where the button is?

Upvotes: 0

Views: 1888

Answers (2)

rtribaldos
rtribaldos

Reputation: 1277

In the element where you whant your popover displayed, add the following directive:

popover-append-to-body="true"

Like this:

<small popover="{{form.descripcion}}" popover-trigger="mouseenter" popover-append-to-body="true">
    [{{form.status}}]
</small>

Upvotes: 1

machinehead115
machinehead115

Reputation: 1657

The element styling is set in the source of UI Bootstrap in the tooltip section.

Tooltips and popovers are not meant to store that much data which is why they just center it over the element that it is attached to.

EDIT

For this specific example you can add this CSS:

.popover-parent + .popover {
    top: 0 !important;
}

.popover-parent + .popover .arrow {
    top: 15px !important;
}

The most dynamic way would be to hook into the event that shows the tooltip and calculate the position of the popover then.

Upvotes: 0

Related Questions