CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
asong91
asong91

Reputation: 417

Top of bootstrap popover being cut off within div

I have a table full of buttons that generates popovers to the left and the table is within an accordion. The problem is when if the popover is generated from the top of the table, the popover gets cut off. How would I manually position the popover by pixel-still on the left, or just get it to appear on top(outside the div).

JSFiddle Example

Here's my HTML:

<body>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
       <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <div class = "testTable">
            <table class = "table table-striped">
            <tr><td>Test1</td>
            <td>         
                <div class = "td-container">
                    <div class ="btn-group btn-broup-sm">
                        <button id="elem" class="btn btn-danger" data-trigger="click">
                            Click for popover</button>
                    </div></div></td></tr>
            <tr>
                <td>Test3</td>
                <td>Test3</td>
            </tr>
            <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
            <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
            <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
        </table>
        </div>
        </div>
        </div>

         <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Test text
      </div>
    </div>
  </div>
<body>

Here's my CSS: 

.well {
    margin-top: 40px;
}

.testTable{
    height: 200px;
    overflow: auto;
}

table{
    height: 200px;
    text-align:center;
}

Javascript:

$('#elem').popover({placement:"left",
                    container:".td-container",
                    html: true,
                    title: "Test popover",
                    content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quism."});

Upvotes: 4

Views: 4584

Answers (2)

CannonFodder
CannonFodder

Reputation: 332

You can specify the container using the data-container attribute or do it in JavaScript.

$('#elem').popover({placement:"left",
                    container:".td-container",
                    html: true,
                    title: "Test popover",
                    container: "body",
                    content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quism."});

Discovered from: https://stackoverflow.com/a/15981951/2527231

Upvotes: 0

Pandiyan Cool
Pandiyan Cool

Reputation: 6565

Make the container as body

$('#elem').popover({placement:"left",
                    container:"body",
                    html: true,
                        title: "Test popover",
                        content:"Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quism."});

Upvotes: 3

Related Questions