Dropdown menu inside a cell...problem with overflow

Dropdown menu inside a cell...problem with overflow

itajackassitajackass Posts: 72Questions: 26Answers: 3

I'd like to insert different dropdown menu inside a cell in datatables.

Without this CSS code:

   .table-responsive,
   .dataTables_scrollBody {
      overflow: visible !important;
   }

the dropdown menu remain inside the cell and is cutted out by border of the cell (scroller appears to all table!)

Adding the CSS written before, seems to be ok (when responsive is enabled). But when responsive is disabled, I get all columns going out the screen (using a small screen)

See my fiddle:

http://jsfiddle.net/umjdeLnq/2/

Is there any way to use a dropdown menu in the correct way?

Answers

  • colincolin Posts: 6,245Questions: 0Answers: 1,073

    Hi @itajackass ,

    With your example, I set responsive to both true and false, and both looked the same. Could you give steps on how to reproduce, please.

    Cheers,

    Colin

  • itajackassitajackass Posts: 72Questions: 26Answers: 3

    Hi @colin I just give you wrong fiddle:

    Here is the correct fiddle with 4 examples: http://jsfiddle.net/15f73pts/2/

    example 1: CSS disabled: column action has a dropdown that don't show well

    example 2: CSS enabled and responsive disabled: all ok cause i have only few columns that doesn't exceded the screen

    example 3: CSS enabled and responsive enabled: all ok!

    example 4: CSS enable and responsive disabled with a lot of columns: drowpdown is ok but columns are show ALL and go outside the screen

    I need to solve the case 4: i need dropdown ok, and scroller X working ok on the table with responsive OFF

  • colincolin Posts: 6,245Questions: 0Answers: 1,073

    Hi @itajackass ,

    I enabled Responsive and it seems to behave as you want - see here. Am I missing something?

    Cheers,

    Colin

  • itajackassitajackass Posts: 72Questions: 26Answers: 3

    Hi @colin .

    Maybe your screen is too big and don't see the problem. I'll attach a screenshot.

    I need to solve the dropdown when RESPONSIVE IS OFF in example 4.
    Columns going outside the size of the table using overflow: visible. If I'll use overflow: hidden columns are ok...but dropdown broke.

  • colincolin Posts: 6,245Questions: 0Answers: 1,073

    Hi @itajackass ,

    It's your CSS, if you remove this, it'll work:

    .table-responsive,
    .dataTables_scrollBody {
        overflow: visible !important;
    }
    
    .table-responsive-disabled .dataTables_scrollBody {
        overflow: hidden !important;
    }
    
    

    Cheers,

    Colin

  • itajackassitajackass Posts: 72Questions: 26Answers: 3
    edited July 12

    Hi @colin ,

    I have inserted this CSS to show correctly the dropdown. If I'll remove this CSS, dropdown visualization broke (It's "hidden" inside the table). See attachment.

  • allanallan Posts: 50,571Questions: 1Answers: 7,530 Site admin

    You've got scrolling enabled, so anything inside the scrolling container is going to be cut off. Its also worth keeping in mind that Responsive and horizontal scrolling are effectively incompatible since they are attempting to solve the same issue (wide table / narrow screen).

    I'd suggest doing it without scrolling, have Responsive enabled and set the column priority high for the column you want to keep visible.

    Allan

Sign In or Register to comment.