1

So I have a table that I made it scrollable horizontally by changing the table scrollable in css.

However, dropdown menus started to be cut off near the end of the table in a scrollable manner. So the dropdown menus are technically visible, but you have to put the cursor near the dropdown and try to scroll down to see the rest of the dropdown menu. I tried to make overflow-y hidden which disabled the vertical scroll but that didn't make dropdown go over the other divs. And of course z-indexes too..

So before the code snippet it looked like this(as you can Options buttons get cut off):

enter image description here

        $('.table-scrollable').css({'display' : 'inline-block', 'width' : '100%', 'overflow-x' : 'auto'});
        $('.dropdown-toggle').css({'z-index' : 9999});
        $('.dropdown-menu').css({'z-index' : 9999});
        $('.li').css({'z-index' : 9999});

And after the code, it looks like this:

enter image description here

How can I have the table both scrollable horizontally and still make the dropdown menus visible as it used to? So the dropdown menu would go over the page numbers?

tonybrown
  • 121
  • 1
  • 7
  • 2
    Please include a selfcontained example that demonstrates the problem. – Christoph Mar 03 '17 at 14:36
  • Add `position:absolute` in this line `$('.dropdown-menu').css({'position' : absolute});` – neophyte Mar 03 '17 at 14:42
  • 1
    @neophyte that's kind of a vague assumption given the fact, that we know nothing about the code structure. If it hasn't been positioned before, this would probably break the dropdown, if it has, it won't change anything, – Christoph Mar 03 '17 at 14:45
  • Thanks! it was just an assumption as he didn't provide any code..thanks again. – neophyte Mar 03 '17 at 14:53
  • @Christoph Sorry, I'm not sure what's relevant to this question cause a lot of the code was written by someone else. And I obviously can't post so much unnecessary code, so it would help me if you can point out what is relevant.(CSS, html, js, php etc.) Again the dropdown used to be visible no matter what, now I have to scroll down in the same div to see it. – tonybrown Mar 03 '17 at 15:16
  • @Christoph Isn't this just a CSS issue? And, I can set the CSS to whatever I want with Jquery. I don't get how the other code is relevant here when I could see the dropdown without having to scroll down before the CSS change. Can you explain? – tonybrown Mar 03 '17 at 15:58
  • http://stackoverflow.com/help/mcve – Christoph Mar 03 '17 at 19:00

1 Answers1

1

Set your dropdown to fixed position, replace your code:

$('.dropdown-menu').css({'z-index' : 9999});

to:

$('.dropdown-menu').css({'position' : 'fixed', 'z-index' : 9999});

but there will be other problems with position fixed...

or instead of making position fixed make your table-scrollable has fixed height, so it always can allow dropdown to fit it's height without hidding it, change:

$('.table-scrollable').css({'display' : 'inline-block', 'width' : '100%', 'overflow-x' : 'auto'});

to:

$('.table-scrollable').css({'display' : 'inline-block', 'width' : '100%', 'min-height': '200px', 'overflow-x' : 'auto'});

(I guess your problem made overflow, when you have no-data in table)

Ultrazz008
  • 1,678
  • 1
  • 13
  • 26
  • Thanks for the help. But, this way the dropdown, in the same way, overflows in the same div so you have to scroll down in the div to see the dropdown as opposed appearing over the div below. It used to show dropdown over other divs, now it's kind of hidden if you don't scroll in the same div. – tonybrown Mar 03 '17 at 15:14
  • Then try with position fixed, the first method i wrote. – Ultrazz008 Mar 03 '17 at 15:18
  • I tried changing it to fixed and absolute, but still the same. I still need to scroll down within the table's div to see the dropdown. I see what you did with min-height:200 that it makes the table a little bigger when there is only one row and it could solve the issue for when there is one row. However the table height is indefinite since there could be different number of rows so min-height can easily be less than the actual, so it would have no effect if that makes sense. – tonybrown Mar 03 '17 at 15:44
  • Well, with positions `fixed` or `absolute` it should work, try to specify higher `z-index` for these, like `999999` at `.dropdown-menu`... – Ultrazz008 Mar 03 '17 at 15:49
  • Well, the issue is not z-index. It can be seen if you scroll down regardless. But it gets cut off if you don't scroll down. Without scrolling down: http://imgur.com/a/s5gyD and after scrolling down: http://imgur.com/a/jtQw2 And I also tried to set oveflow-y to hidden, visible etc. but the dropdown either gets completely cut off so I can never see it or I have to scroll down in the table div to see it. – tonybrown Mar 03 '17 at 15:55
  • Mate, `position: fixed` with highest `z-index` should be above, no matter you scroll or no.. (it would be on screen fixed, if you scroll it would follow your scroll) I would gladly help you if i could access to your code, or you could make a sample with the same bug.. – Ultrazz008 Mar 03 '17 at 15:58
  • I'll try to do that. But in the meanwhile, I just noticed that the code $('.dropdown-menu').css({'position' : 'fixed', 'z-index' : 9999999}); $('.table-scrollable').css({'display' : 'inline-block', 'width' : '100%', 'min-height': '200px', 'overflow-x' : 'auto'}); sets the table scrollable's element.style as one would expect, but not dropdown-menu's element.style.(when I inspect on Google Chrome) – tonybrown Mar 03 '17 at 16:11
  • When I manually set the position fixed for the dropdown menu, then the dropdown menu doesn't appear cause it can't drop down when fixed it seems. If it's absolute, then it can drop down but again you have to scroll down. http://imgur.com/a/wgEIN – tonybrown Mar 03 '17 at 16:35
  • Absolute will always scroll when its parent has overflow – Ultrazz008 Mar 03 '17 at 17:41
  • Try to switch it outside of scroll element – Ultrazz008 Mar 03 '17 at 17:41