Table not centered

Table not centered

M1408M1408 Posts: 28Questions: 8Answers: 1

Hello,

I have a table that is not centered within the page, the paging is all the way to the right side of the page with empty space over it and the actual table is to the left of the page. I am not 100% sure why, but I think it has to do with the fact that I am hiding a lot of the columns of the table (using columnDefs and visibility) showing them in the details of the entry.
Is there a way to force the table to center on the page or any other advise/input that I could use?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    table.dataTable {
      margin: 0 auto;
    }
    

    would center it in the container. If you want the container to be smaller, you could use a max-width and margin for it.

    Allan

  • M1408M1408 Posts: 28Questions: 8Answers: 1

    That only centered the concent but not the header row.

    I removed //scrollX: 'false', that centered it but now the columns are large than they have to, the scroller need to be scrolled to the right to see the rightmost column. even though if the rest of the columns are made only slightly smaller, then it will all show on the page without the user of the scroller
    I did make the container smaller, it did not fix it.

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    I wasn't aware that you were using scrolling.

    div.dataTables_scroll {
      margin: 0 auto;
    }
    

    should do it for scrolling.

    Allan

  • M1408M1408 Posts: 28Questions: 8Answers: 1

    Still didn't work
    I turned on and off scrolling
    I tried, div.datatables_scroll, table.datatables, ,datatables_scroll, .datatables

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    The div has 100% width by default (since that's how div's work), so it looks like you need to add a width to that: http://live.datatables.net/zisiduze/1/edit .

    Can you link to the page you are working with please?

    Allan

  • M1408M1408 Posts: 28Questions: 8Answers: 1
    edited November 2017

    I was able to fix it using :

    .dataTables_wrapper {
      margin: 0 auto;
      width: 70%;
    }
    

    That got the buttons, the header, the body and the info centered properly
    Only thing that is still eluding me is the pagination, it is not aligned with the table, but still, all the way to the right on its own

    ScrollX: false is included too

    I sent you the page info in a message

  • M1408M1408 Posts: 28Questions: 8Answers: 1

    Actually, the following code is what centered it

    .dataTables_wrapper {
      margin: 0 auto;
      width: 50%;
    }
    
    1. The main issue with the above code is, ofcourse the columns are now narrow
    2. I also still have a scrollbar that is not needed
    3. I am still stuck on aligning the pagination
  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    If you want the whole DataTable container, including the paging control to be constrained in width, that's a lot easier:

    div.dataTables_wrapper {
      margin: 0 auto;
      width: 70%;
    }
    

    and remove the CSS that was added before.

    I also still have a scrollbar that is not needed

    I'd need a link to a test case showing the issue please.

    Allan

  • M1408M1408 Posts: 28Questions: 8Answers: 1
    edited November 2017
    1. Yes, the div.datatables_wrapper does constrain the width, centering the table if the width is set at 50%. However, the columns are also narrower, I need to center the table, the header, the buttons and the pagination without narrowing the width of the columns.

    2. The Div.datatables_wrapper css does keep the buttons, header and body aligned but not the pagination. I need to make sure all the elements are aligned properly

    3. Test case: I did email you a link to the page I am having trouble with and access details. is that not sufficient or would you like me to do something different?

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    Sorry - I missed your PM before I sent the above message. I've loaded the page now, but I'm actually getting a couple of Javascript errors on it and there is no data in the table:

    Uncaught TypeError: Cannot read property 'ext' of undefined
    at SelectizeDataTableBridge.js:21

    And

    Uncaught TypeError: jQuery(...).MainFunction is not a function
    at HTMLDocument.<anonymous> ((index):338)

    Allan

  • M1408M1408 Posts: 28Questions: 8Answers: 1
    edited November 2017

    Okay, sorry about that
    I will fix it and let you know

  • M1408M1408 Posts: 28Questions: 8Answers: 1

    It should be working now. Sorry about that

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    Could you add style="width: 100%" as an attribute to your table element please?

    If I've understood correctly, that's the missing element here.

    Allan

  • M1408M1408 Posts: 28Questions: 8Answers: 1

    Didn't fix it.
    Please see your PM

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    edited November 2017 Answer ✓

    The string used for the HTML in the table isn't correct:

    HTML1_Start_JS = "<div class=\"table-responsive\"><table id = \"EscrowTable\" class=\"table table-bordered table-striped table-hover style=\"width: 100%\"\"><thead><tr>";

    There is an escaped double quote missing at the end of the class list, which is causing the HTML parser to see style as a class name.

    Allan

  • M1408M1408 Posts: 28Questions: 8Answers: 1

    Oh, silly me!!
    Yeah, that worked!! thank you!

This discussion has been closed.