This project is read-only.

Filter hides grid if we apply boostrap 3 responsive table

Aug 28, 2014 at 7:01 AM
Edited Aug 28, 2014 at 7:06 AM
I m using bootstrap 3 responsive table. I've applied the responsive to this grid. After apply the reponsive the grid becomes responsive. But when i click on Filter, the filter hides the grid..
http://imgur.com/IHYpnmV,MEtF0es#0
Please see the images..

before click on filter
http://imgur.com/IHYpnmV,MEtF0es#1
After click on filter
> http://imgur.com/IHYpnmV,MEtF0es#0
Note::: Copy the full link and paste in browser.. there is some issue when post the link here..
Aug 28, 2014 at 7:33 AM
Edited Aug 28, 2014 at 7:55 AM
Dec 1, 2014 at 2:15 PM
Hello, i have same problem as jeevajsb but the solution isnt work, because gridmvc dont use bootstrap dropdown menu system, but it use own system, so problem still remain.
Dec 16, 2014 at 2:31 PM
Edited Dec 17, 2014 at 5:55 AM
Hi Bukharin,
Please review and add it to the code..
If we have responsive table, then the pop up will be hidden in the ride side of the table.
To resolve this issue, I've tried like following.
// Added
.grid-mvc {
    min-height:300px;
}
Added 37 instead of 10 while adding and subtracting.
So that, the dropdown will be look like in the following image. So the Filter pop up won't be hidden if it is in the right corner.
please see the image in the following url  [http://i.imgur.com/dskbfh2.png](http://i.imgur.com/dskbfh2.png)
__In gridmvc.js__

gridMvc.prototype.setupPopupInitialPosition = function (popup) {
        var drop = popup.find(".grid-dropdown");
        function getInfo() {
            var arrow = popup.find(".grid-dropdown-arrow");
            return { arrow: arrow, currentDropLeft: parseInt(drop.css("left")), currentArrowLeft: parseInt(arrow.css("left")) };
        }
        var dropLeft = drop.offset().left;
        if (dropLeft < 0) {
            var info = getInfo();
            info.arrow.css({ left: (info.currentArrowLeft + dropLeft - 37) + "px" });
            drop.css({ left: (info.currentDropLeft - dropLeft + 37) + "px" });
            return;
        }
        var dropWidth = drop.width();
        var offsetRight = $(window).width() - (dropLeft + dropWidth);
        if (offsetRight < 0) {
            var info = getInfo();
            info.arrow.css({ left: (info.currentArrowLeft - offsetRight + 37) + "px" });
            drop.css({ left: (info.currentDropLeft + offsetRight - 37) + "px" });
        }
    };