CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
digitalextremist
digitalextremist

Reputation: 5993

Popover truncated when inside a collapsed navbar, in bootstrap3

Setting up the question, here is the situation, the problem, the screenshot, and the code:

The situation:

The problem:

When the navbar is in its collapsed state, the popover is hidden within the scrollable area allotted to the navbar options.

The screenshot:

enter image description here

The HTML:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-topnav">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">
            <span class="fa fa-home"></span>
        Unearth Synergy
        </a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-topnav">
        <ul class="nav navbar-nav navbar-left">
    <li><a popover="signin_form" href="#">Sign In<span class="fa fa-sign-in"></span></a></li>
        </ul>
    </div>
</div>

The JavaScript:

$('body').popover({
    selector: '[popover]',
    placement: "auto bottom",
    html: true,
    content: function() {
        return $('#'+$(this).attr("popover")).html();
    }
});

So how do I show the popover outside the collapsed navbar in the main content area itself?

I obviously do not want the content in the popover to be locked within the scrollable region caused by bootstrap allocating a fixed-height scrollable region for navbar items.

I've seen questions similar to this asked about dropdown elements, but nothing about popover elements which are an entirely different situation. Since this issue seems to be relevant to bootstrap use, I am posting it, answering it, and leaving this at the point where a slight improvement can be made if anyone is interested.

Upvotes: 2

Views: 1179

Answers (1)

digitalextremist
digitalextremist

Reputation: 5993

With container: ‘body’ added to the JavaScript declaration of the popover, the following now occurs, which is closer:

SS

The popover is now under the navbar.

But with this CSS augmentation, along with the JavaScript tweak, the problem is solved… basically:

.popover.in {
    z-index: 9999;
}

The last (purely aesthetic) issue is now that the popover arrow and content are oriented to the expanded link as a whole, rather than to the icon and text of the link contents.

That is expectable, and there is no usability impediment, and so the issue is solved:

enter image description here

Upvotes: 3

Related Questions