+ and - signs not centering in circle

csquare

just installed latest dataTable responsive version 2.0.0. + and - signs in green and red circles are not centered but show at the right bottom in these circles. Any idea how to fix this?

jLinux

Screenshot? Code? Details? Steps to replicate?.... Anything at all?...

/FacePalm

allan

Hi,

Surprisingly, getting the + and - signs to align correctly in Responsive 2 was one of the hardest parts of its development! I thought I had it nailed, but it is quite possible that there is something going wrong somewhere.

We would need the following information to be able to offer any help:

• A link to the page question (even if it is on this site!)
• What browser you are using
• What OS you are using

Thanks,
Allan

csquare

Allan and jLinux, Thanks for the comments. Here is requested info:

1. Link - mine is a development site so not able to post a link
2. Browser - Google chrome - Version 46.0.2490.80 m
3. OS - Windows 7

4. Screenshot - I would love to post one here but when I do post for screenshot image, nothing is posting here. I am assuming this site is text only and does not support image posting??? Can I email you a screenshot if that helps??

5. Code: here is portion of the code on viewsource for the table. Green collapse button appears in the first column (th) before the checkbox.

<div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12 form-group">
            <table id="" class="basic-datatable-invoices table table-hover" style="width: 100%">
                <thead>
                    <tr>
                        <th style="text-align: center">
                            <input id="selectAllInvoices" name="selectAllInvoices" type="checkbox" value="" />
                        </th>
                        <th>Number</th>
                        <th>Date</th>
                        <th>Client</th>
                        <th>Amount</th>
                        <th>Paid</th>
                        <th>Balance Due</th>
                         <th>Currency</th>
                        <th>Status</th>
                        <th>Internal Notes</th>
                        <th>&nbsp</th>
                    </tr>
                </thead>
                <tbody>                
                  <tr>
                    <td style="text-align: center">
                        <input id="selectedInvoices" name="selectedInvoices" type="checkbox" class="invoiceCheckbox" value="577" data-Number="INV-1002"/>
                    </td>
                    <td>
                         <a href="/Invoices/ViewInvoice3/577">INV-1002</a>
                    </td>

Here is code for how I am initializing dataTable:

 /*----------Data Table----------*/
 
$('table.basic-datatable-invoices').dataTable({
        responsive: true, //makes table responsive
        "bLengthChange": false,
        "iDisplayLength": parseInt($("#pagesizecount").val()),
        searching: false,
        info: false,
        autoWidth: false,
        "bSort": true,
        "aaSorting": [[1, 'desc']], // us this to set up default sort on initialization
        "aoColumnDefs": [{ "bSortable": false, "aTargets": [0, 10] }],
    });

Hope you can help.

Thanks,

allan

I am assuming this site is text only and does not support image posting?

This is correct. You could use picpaste or similar to post images.

text-align: center;

It looks like that is what is causing the issue. At least if add the style to this example it is knocked out of alignment.

I've just committed the fix and this will be propagated to the nightly builds in the next couple of minutes.

Allan

csquare

Thanks Allan. Here is screen shot link

http://picpaste.com/Untitled-mubjSEfH.png

Yes you are correct that text-align: center is causing it. I tested my code after removing it and then + sign gets centered.

So I assume all I need to do it to download responsive.dataTables.min.css & dataTables.responsive.min.js after nightly build and that should fix the issue. Let me know.

Thanks,

allan

Just the CSS. No change in the Javascript (other than to bump the version number on).

Allan

csquare

Allan, I downloaded new responsive.dataTables.min.css but problem still not fixed. Did the updates happen in this file?

Thanks,

allan

When you say the "new" files - which ones? Can you link to the page showing the issue so I can debug it please.

csquare

New files - I downloaded responsive.dataTables.min.css from dataTables sites assuming it was updated to handle text-align: center as per our discussion above.

link to the page: http://test.getcompanysquare.com/Account/LogOn (login using r@r.com / square123). Go to Invoice tab on the left and then click invoice. You will see invoice list table which will become responsive when you reduce screen size.

allan

It doesn't look like the Responsive CSS on your page has the fix. Can you try using this file which does.

Allan

csquare

So can you tell me which file I should download from http://datatables.net/download/index
site? I would rather download the updated new file than copy/pasting patches of code which may not be a good practice.

csquare

code you sent does fix the issues.

fyi - this code is not there on http://datatables.net/download/index site yet.

Thanks,

allan

No - it hasn't been released. It is in the nightly which I linked to above.

Allan