Content is not aligned properly

Content is not aligned properly

Inês BorgesInês Borges Posts: 8Questions: 1Answers: 0

image

My edit column is not aligned properly. It is not aligned to the rightmost part of the table. It ruins the layout.
How can I make it aligned.


$(document).ready(function () { $("#users-table").DataTable({ "ajax": { "url": '@Url.Action("GetList", "Users")', "type": "GET", "datatype": "json" }, "columns": [ { "data": "ID" }, { "data": "PERFIL" }, { "data": "USERCD" }, { "data": "USERNM" }, { "data": "USERNIF" }, { "data": "ABREVIATURA" }, { "data": "COREACTIVO" }, { "data": "USERML" }, { "data": "PERFILWEB" }, { "render": function (data, type, row) { let toggleIcon = row.COREACTIVO === "S" ? "" : ""; return " | '" + toggleIcon + ""; } } ], "aoSearchCols": [ // Filters table in first load to show only active null, null, null, null, null, null, { "sSearch": "S" } // Index 6 ], language: { search: "Procurar: ", processing: "A carregar", lengthMenu: "Mostrar _MENU_ registos", info: "A mostrar de _START_ a _END_ registos de _TOTAL_ registos", infoFiltered: "(filtrados _MAX_ registos de total)", infoEmpty: "A mostrar 0 a 0 registos de 0 registos", loadingRecords: "A carregar registos...", zeroRecords: "Nenhum registo para mostrar", emptyTable: "Tabela vazia", paginate: { first: "Primeiro", previous: "Anterior", next: "Próximo", last: "Último" }, aria: { sortAscending: ": Ordenar por ordem crescente", sortDescending: ": Ordenar por ordem decrescente" } }, pageLength: 25, "pagingType": "simple_numbers", "scrollX": true, "scrollCollapse": true, "fixedHeader": true, fixedColumns: { leftColumns: 0, rightColumns: 1 }, dom: "<'row'<'col-sm-6'B><'col-sm-6'f>>"+'rtip', buttons: [ { "extend": 'colvis', "text": '', "columns": ':not(.permanent)', className: "colvis" }, { text: '', extend: "pageLength", className: "show-entries" }, { text: '', extend: 'collection', className: "filter-active-inactibe-btn", buttons: [ { text: "Ativo", name: "filter-active-btn", action: function (e, dt, node, config) { $("#users-table").DataTable().columns(6).search('S').draw(); this.active(true); $("#users-table").DataTable().button('2-1').active(false); $("#users-table").DataTable().button('2-2').active(false); } }, { text: "Todos", name: "filter-all-btn", action: function (e, dt, node, config) { $("#users-table").DataTable().columns(6).search("").draw(); this.active(true); $("#users-table").DataTable().button('2-0').active(false); $("#users-table").DataTable().button('2-2').active(false); } }, { text: "Inativo", name: "filter-inactive-btn", action: function (e, dt, node, config) { $("#users-table").DataTable().columns(6).search('N').draw(); this.active(true); $("#users-table").DataTable().button('2-0').active(false); $("#users-table").DataTable().button('2-1').active(false); } } ] } ], // Changes the color of the letter to red if the letter is N for COREACTIVO "createdRow": function (row, data, index) { if (data.COREACTIVO === "N") { row.style.backgroundColor = "#ff000055"; } }, // Defines the visibility of the column ID "columnDefs": [ { "targets": [0,6], "visible": false, "searchable": true }, { "targets": [9], "className": "text-center", "width": "50px" }, { "targets": [0,1,2,3,4,5,6,7,8], "width": "20%" } ] }); $("#users-table").DataTable().buttons('2-0').active(true); });

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197

    Column misalignment problems are generally due to not having the correct Datatables JS and CSS files, the table is hidden when initialized and when shown the column widths aren't recalculated or using FixedHeader and FixedColumns together. Previous versions were incompatible. Make suer you are using the latest version of each since you are using both.

    If this doesn't help we will need to see the page to debug the styling issues. Please post a link to your page or a test case replicating the issue so we can take a look.
    https://datatables.net/manual/tech-notes/10

    Kevin

  • Inês BorgesInês Borges Posts: 8Questions: 1Answers: 0

    I have these scripts and these links:

    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script> <script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script> <script src="//cdn.datatables.net/plug-ins/1.10.12/sorting/datetime-moment.js"></script> <script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.colVis.min.js"></script> <script src="https://cdn.datatables.net/fixedcolumns/3.3.2/js/dataTables.fixedColumns.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>

    <link href="//cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet" /> <link href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css" rel="stylesheet" /> <link href="https://cdn.datatables.net/fixedcolumns/3.3.1/css/fixedColumns.bootstrap.min.css" rel="stylesheet"/> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197

    FixedColumns is at 4.0.1. You have FixedHeader enabled but I don't see the library being loaded. You can try a later version of FixedColumns. Use the Download Builder. For more suggestions please post a link to a test case showing the issue.

    Kevin

  • Inês BorgesInês Borges Posts: 8Questions: 1Answers: 0

    I've added everything in the download builder and it became even worse.

    The row should be red as this piece of code states:
    // Changes the color of the letter to red if the letter is N for COREACTIVO "createdRow": function (row, data, index) { if (data.COREACTIVO === "N") { row.style.backgroundColor = "#ff000055"; } }

    How can I make the row red?

  • Inês BorgesInês Borges Posts: 8Questions: 1Answers: 0

    And it throws me this warning:

    DataTables warning: table id=users-table - Requested unknown parameter '9' for row 1, column 9. For more information about this error, please see http://datatables.net/tn/4

  • Inês BorgesInês Borges Posts: 8Questions: 1Answers: 0

    I've figured it out. CSS specificity was causing the row not to be red. But I can't get rid of the warning.

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197

    But I can't get rid of the warning.

    Did you follow the troubleshooting steps at the link provided?
    http://datatables.net/tn/4

    Kevin

  • Inês BorgesInês Borges Posts: 8Questions: 1Answers: 0

    Well, I don't have any rowspan or colspan in my tbody.
    I don't know how to calculate the number of cells.
    I have specified the exact number of columns that are in the table, which is 10.
    My column.render returns something.
    How can I check the server error logs?

  • Inês BorgesInês Borges Posts: 8Questions: 1Answers: 0

    Solved the problem by adding these two lines of code in columnDefs:

    {
         "defaultContent": "",
         "targets": "_all"
    },
    
  • Inês BorgesInês Borges Posts: 8Questions: 1Answers: 0

    Hope this helps someone else :smile:

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197
    Answer ✓

    The problem might be that you need to add the following to the last column:

                        {
                            data: null,
                            defaultContent: "",
                            "render": function (data, type, row) {
                                let toggleIcon = row.COREACTIVO === "S" ? "<i></i>" : "<i></i>";
                                return "<a rel="nofollow" href="./UpdateUserlogin?" + "id=" + row.ID + ""><i></i></a> | <a>'" + toggleIcon + "</a>";
                            }
                        }
    

    Requested unknown parameter '9' for row 1

    Adding columns.data as null and columns.defaultContent as "" should allow the data to be populated without specifying an object for this column.

    Kevin

Sign In or Register to comment.