Search code examples
angularjssafariangular-ui-bootstrappopover

Angular ui-bootstrap popover text overflow using safari

There is an issue with text overflowing ui-bootstrap's popover on the Safari browser. The problem was initially seen on an iPhone with its narrow screen but also occurs on Windows7 running Safari 5.1.7. When a popover occurs outside the window, the horizontal scroll bar is enabled to view the element, however the text overruns the popover box. This issue does not occur either Chrome or Firefox. See Plunker

<button popover-placement="right" popover="On the Right blah blah blah blah blah blah" class="btn btn-default">button</button>

Ordinarily I wouldn't put a right popover on an element to the right, but again, this accurately depicts the problem I'm seeing on the iPhone with its narrow screen. It doesn't seem to be addressed in later releases of angular and ui-bootstrap either. Wondering if there is any work around short of rearranging my ui.

Solution

  • something like this?

    plunker

    .popover.right {
width: 100%;
}

    I tested it on chrome and safari... looks fine to me.. just needed a small css tweak