Bootstrap popover arrow correction when rounded corners are removed

Question

I have setup a Bootstrap 3 popover design here.

I have removed the border-radius with this code:

.popover {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    max-height: 50%;
    overflow-y: auto;
}

This resulted in the arrow disappearing from view. I want to retain the arrow. Tried a lot of solutions offered here but couldn't get it right. How can I correct my code?

Answer 1

It's the overflow causing the issue. If you want to set the custom height do that on .popover-content

See here: http://www.bootply.com/esSpOuWbLb