Bootstrap popover with table-responsive

Navigation
1

I'm using Bootstrap v3. And I need to filter the fields of the tables. I chose to use this example as a basis.

I am now having a problem, when I am viewing my table (is table-responsive) on a mobile device, what happens is that the filter box disappears because it is "inside the table", you can see in the images below:

Desktop

Mobile

Here's an example of my code:

HTML: 

<div class="table-responsive">
  <table id="example-table" class="table table-striped table-hover">
    <thead>
      <th> Campo x

        <!--DEPOIS DE APLICADO O FILTRO BEGIN-->   
        <i data-original-title="Filtro para &quot;Campo x&quot;"
        class="glyphicon glyphicon-filter filterable editable editable-click editable-empty editable-open"
        data-name="0" title="">
        </i>
        <div class="popover editable-container editable-popup fade bottom in">
            <div class="arrow"></div>
            <h3 class="popover-title">Filtro para "Campo x"</h3>
            <div class="popover-content">
                <div>
                    <form style="" class="form-inline editableform">
                        <div class="control-group form-group">
                            <div>
                                <div style="position: relative;" class="editable-input">
                                    <input style="padding-right: 24px;"
                                        class="form-control input-sm" type="text"><span
                                        style="display: none;" class="editable-clear-x"></span>
                                </div>
                                <div class="editable-buttons">
                                    <button type="submit"
                                        class="btn btn-primary btn-sm editable-submit">
                                        <i class="glyphicon glyphicon-ok"></i>
                                    </button>
                                    <button type="button"
                                        class="btn btn-default btn-sm editable-cancel">
                                        <i class="glyphicon glyphicon-remove"></i>
                                    </button>
                                </div>
                            </div>
                            <div style="display: none;" class="editable-error-block help-block"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
            <!--DEPOIS DE APLICADO O FILTRO END--> 
      </th>
    ...
    </thead>
    <tbody>
    ...
    </tbody>
  </table>
</div>

JQuery: 

$('#example-table').filterable();

jsfiddle

Another example

One more example

I've been searching everywhere and can not find anything on the subject. What is going on and how can I resolve it?

    
asked by anonymous 02.04.2014 / 12:24

1 answer

0

After two weeks of searching and trying everything I know, I've finally been able to solve the problem.

In my case I have added the popover default values to an option in line 1392 of the script bootstrap-editable.js

line code 

1      /*! X-editable - v1.5.1 
.
...
1390   mode: 'popup'      ,
1391
1392   container: 'body'

So the popover is no longer "inside the table" and belongs to the body , so it stays ahead of the other objects.

My reference: link

    
02.04.2014 / 16:29
Update a TableView Library animate and wow css