This topic contains 10 replies, has 3 voices, and was last updated by Sean Sean 1 year, 9 months ago.

datatables scrollX makes Horizontal scroll always visible ?


  • babablacksheep
    Participant

    Posts: 40
    Member Reply #5515

    Hi,
    From Page , check table Default Scroller example

     

    Original datatables shows only  horizontal scroll when needed. But In this theme if we use datatables option scrollX : true , it is always visisble.
    I have only 2 column in project which have datatables scrollX : true and  scrollY enabled andHorizontal scroll is always there even when not needed. My client want to get rid of this situation as it seems very ugly.

    Please Help in fixing css so it appears only when needed like original datatables.
    THankx


    babablacksheep
    Participant

    Posts: 40
    Member Reply #5519

    After a little investigation on firebug I found that

    there is width applied to dataTables_scrollHead > dataTables_scrollHeadInner in pixels.
    If i take that width and do a -4  like  1571px – 4px = 1567px and then apply this width to both <table > elements

    1. dataTables_scrollHead > dataTables_scrollHeadInner > table
    2.  dataTables_scrollBody > table
      seems to work

    But from where this additional 4px is coming from   ? How Can i solve this with css .It has to be css issue since it does not happen in original datatables even with bootstrap


    babablacksheep
    Participant

    Posts: 40
    Member Reply #5520

    adding
    table.dataTable{
    border:0;
    } seems to fix problem but removes borders too.
    Can you please fix this in next release by checking if unnecessary H scroll does not appear

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #5523

    Hi :),

    Thanks for the update. Noted. We will check this further try to fix it in the next update.

    Thanks.

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #5560

    Hi,

    I can’t seem to reproduce this issue with latest Metronic v4.5.4. If possible could you please provide us a test link to your developing site in a private reply ?

    Thanks.


    babablacksheep
    Participant

    Posts: 40
    Member Reply #5561

    Hi
    It is still there.
    You can check demo page for example at http://www.keenthemes.com/preview/metronic/theme/admin_1_material_design/table_datatables_scroller.html.

    Check table Server-side processing(5,000,000 rows). H-scroll is there even when not needed.
    Check attached Image.

    Now to fix it, via firebug or any dev toll try adding css rule

    table.dataTable{
    border:0;
    }

    and then try resizing window and you will see Horizontal scroll now only appears when required.

    Let me know if it clarifies the situation ?

     

     

    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #5564

    Hi,

    If possible can you provide us some screenshots where we can see the issue clearly ?

    Thanks.


    babablacksheep
    Participant

    Posts: 40
    Member Reply #5566

    please check attached image

    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #5581

    Thanks for the clarification. We will check it further 🙂


    nitishankam
    Participant

    Posts: 3
    Member Reply #8791

    Hi,

    To fix this problem use below solution

    $(“#mydataTable”).dataTable({

    “sScrollX”: “100%”,

    “sScrollXInner”: “100%”,

    });

    and then try to resizing window, now Horizontal scroll only appears when required.

    Let me know if it clarifies the above solution?

    Thanks.

     

    • This reply was modified 1 year, 9 months ago by  nitishankam.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #8793

    Hi nitishankam :),

    Thanks for sharing this. We will check it further and consider including this fix in the next update.

    Thanks.

You must be logged in to reply to this topic.