Table not centered

M1408

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?

allan

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

M1408

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.

allan

I wasn't aware that you were using scrolling.

div.dataTables_scroll {
  margin: 0 auto;
}

should do it for scrolling.

Allan

M1408

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

allan

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

M1408

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

M1408

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

allan

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

M1408

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?

allan

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

M1408

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

M1408

It should be working now. Sorry about that

allan

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

M1408

Didn't fix it.
Please see your PM

allan

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

M1408

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