CODEWITHSUNDEEP
jqueryhtmlcssdatatables
user1788364
user1788364

Reputation: 1151

Table has a parent with overflow hidden which cuts off my hover menu

I'm using the jQuery DataTables plugin. I have a table which is inside a fluid width div. What I wanted to do was have this table be able to scroll horizontally once the page no longer allows the table to be full width.

I tried using the DataTables horizontal scrolling example (http://datatables.net/examples/basic_init/scroll_x.html) - but I found it buggy and it didn't work correctly (for instance, I found the TH's didn't match up with the TD's). I found a lot of people had the same issue on the forums and somewhere along the way someone recommended adding a parent div to the table and using:

.parent { overflow-x: auto; overflow-y: hidden; }

This worked really well! The problem I have now is that inside my table I have a little tooltip menu which gets cut off because of the overflow hidden.

You can see a demo here: http://jsfiddle.net/eMvf9/

You'll see that the bottom rollovers now get cut off. However, if I remove the overflow-y: hidden from the .parent then it gets the scrollbars on the Y axis.

Would there be a way around this? Would it have to be jQuery with a position fixed on the .s-roll?

Upvotes: 2

Views: 1751

Answers (2)

user1788364
user1788364

Reputation: 1151

In the end I had to use bootstraps popup box instead which works the way I want it to as I couldn't figure out the logic to do it myself.

This includes an on hover function and will also make the bootstrap popover stay hovered while inside the popover box.

$('.s-roll').popover({
    html:true, 
    trigger: 'manual', 
    placement: 'left'        
}).on("mouseenter", function () {
    var _this = this;
    $(this).popover("show");
    $(".popover").on("mouseleave", function () {
        $(_this).popover('hide');
    });
}).on("mouseleave", function () {
    var _this = this;
    setTimeout(function () {
        if (!$(".popover:hover").length) {
            $(_this).popover("hide");
        }
    }, 100);
});

For those interested: http://jsfiddle.net/eMvf9/6/

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

You can remove the overflow-y from parents on last trs last td hover.

 $('tr:last td:last').hover(function(){
  $('.parent').css('overflow-y', 'auto');    
},function(){
  $('.parent').css('overflow-y', 'hidden');
});

Demo

You can also change hover options top for last elements menu using:

 $('tr:last td:last .s-rollover').css('top', '-90px');

Upvotes: 2

Related Questions