Dropdown button inside bootstrap-table.js

I´m using the "bootstrap-table.js" to list/show my data.

For each row, I wanna show a dropdown list with some related record options.

But, when I put the dropdown inside the cell, the options are shown inside the table in a strange manner.

I realy like to know if is possible show the dropdown options floating out of the table.

<!DOCTYPE html>
<html>
<head>

    <link rel="stylesheet" href="/Content/bootstrap-table.css" />
    <link href="/Content/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>

    <table id="table" data-classes="table table-hover table-condensed" data-toggle="table" data-show-columns="true" data-height="250">

        <thead>
            <tr>
                <th data-field="id">Item ID</th>
                <th data-field="name">Item Name</th>
                <th data-field="price">Item Price</th>
                <th data-formatter="dataFormater" data-width="90">-</th>
            </tr>

        </thead>

        <tbody>

            <tr>
                <td>1</td>
                <td>Item 1</td>
                <td>$1</td>
                <td></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Item 2</td>
                <td>$2</td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td>Item 3</td>
                <td>$3</td>
                <td></td>
            </tr>

        </tbody>

    </table>

<script src="/Scripts/jquery-2.1.1.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/bootstrap-table.js" type="text/javascript"></script>

<script type="text/javascript">

    function dataFormater(value, row, index) {

        var id = row.id;

        var strHTML = "<div class='btn-group' astyle='position: absolute'><button type='button' class='btn btn-primary btn-xs dropdown-toggle' data-toggle='dropdown'>Options<span class='caret'></span></button><ul class='dropdown-menu text-left' role='menu' style='position:absolute'>";
        strHTML += "<li><a href='/Edit/" + id + "'><span class='glyphicon glyphicon-edit'></span>&nbsp;&nbsp;Edit</a></li>";
        strHTML += "<li><a href='/Delete/" + id + "'><span class='glyphicon glyphicon-remove'></span>&nbsp;&nbsp;Remove</a></li>";
        strHTML += "</ul></div>";

        var valReturn = strHTML;

        return valReturn;
    }

</script>

</body>
</html>

The result of this code is:

When the user click on the dropbox, we have the following result:

But, the desired result is this:

How can I achieve that?

Solution

You have to append dropdown menu to Body by detaching it and re-append it to the body by using this function:

(function () {
var dropdownMenu;
$(window).on('show.bs.dropdown', function (e) {
    dropdownMenu = $(e.target).find('.dropdown-menu');
    $('body').append(dropdownMenu.detach());
    var eOffset = $(e.target).offset();
    dropdownMenu.css({
        'display': 'block',
        'top': eOffset.top + $(e.target).outerHeight(),
        'left': eOffset.left
    });
});
$(window).on('hide.bs.dropdown', function (e) {
    $(e.target).append(dropdownMenu.detach());
    dropdownMenu.hide();
});
})();

(function () {
    var dropdownMenu;
    $(window).on('show.bs.dropdown', function (e) {
        dropdownMenu = $(e.target).find('.dropdown-menu');
        $('body').append(dropdownMenu.detach());
        var eOffset = $(e.target).offset();
        dropdownMenu.css({
            'display': 'block',
            'top': eOffset.top + $(e.target).outerHeight(),
            'left': eOffset.left
        });
    });
    $(window).on('hide.bs.dropdown', function (e) {
        $(e.target).append(dropdownMenu.detach());
        dropdownMenu.hide();
    });
})();

function dataFormater(value, row, index) {
    var id = row.id;
    var strHTML = "<div class='btn-group' astyle='position: absolute'><button type='button' class='btn btn-primary btn-xs dropdown-toggle' data-toggle='dropdown'>Options<span class='caret'></span></button><ul class='dropdown-menu text-left' role='menu' style='position:absolute'>";
        strHTML += "<li><a href='/Edit/" + id + "'><span class='glyphicon glyphicon-edit'></span>&nbsp;&nbsp;Edit</a></li>";
        strHTML += "<li><a href='/Delete/" + id + "'><span class='glyphicon glyphicon-remove'></span>&nbsp;&nbsp;Remove</a></li>";
        strHTML += "</ul></div>";

    var valReturn = strHTML;
    return valReturn;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<table id="table" data-classes="table table-hover table-condensed" data-toggle="table" data-show-columns="true" data-height="250">
    <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
            <th data-formatter="dataFormater" data-width="90">-</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Item 1</td>
            <td>$1</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Item 2</td>
            <td>$2</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Item 3</td>
            <td>$3</td>
            <td></td>
        </tr>
    </tbody>
</table>