Header of my DataTable appears all piled up

DudFelipe

Hi guys. (Sorry for my inglish, it's not my main language).

So, i have a page with some tabs. One of those tabs have some inputs and a DataTable.
The problem is the headers of my DataTable appears all pilled up and they all adjust only when I click in one of then.

i've already tried some examples found here in the forum but nothing works for me... can someone help me?

here my .js file

$(function () {
$("#btnPesquisar").on("click", function () {
let numProtocRequis = $("#ConsultaModel_NumProtocRequis").val();
window.location = "DetalhesRequisicao?numProtocRequis=" + numProtocRequis
});

const queryParams = new URLSearchParams(window.location.search);
const numProtocRequisQueryString = queryParams.get("numProtocRequis");
const service = tRF3.sISPREC.viewRequisicoes.viewRequisicao;

const dataTable = $("#ViewDetalhesRequisicaoOriginariosListagemTable").DataTable(abp.libs.datatables.normalizeConfiguration({
    processing: true,
    serverSide: false,
    paging: true,
    searching: false,//disable default searchbox
    autoWidth: true,
    scrollCollapse: false,
    order: [[0, "asc"]],
    ajax: abp.libs.datatables.createAjax(service.getDetalhesRequisicaoOriginariosListagem, function () {
        return numProtocRequisQueryString;
    }),
    columnDefs: [
        {
            title: "Num_protoc_requis",
            data: "numProtocRequis",
            innerWidth: "100%"
        },
        {
            title: "Num_proces_origin",
            data: "numProcesOrigin"
        },
        {
            title: "Cod Unidade",
            data: "seqDomUnidadJudici"
        },
        {
            title: "Dat_protoc_proces_origin",
            data: "datProtocProcesOrigin"
        },
        {
            title: "Cod_Siafi_Unidad",
            data: "codSiafiUnidad"
        },
        {
            title: "Cod_Tipo_Juizo",
            data: "codTipoJuizo"
        },
        {
            title: "Email",
            data: "email"
        },
        {
            title: "Juízo",
            data: "juizo"
        }
    ]
}));

// Listen for Bootstrap tab change
document.querySelectorAll('button[data-bs-toggle="tab"]').forEach((el) => {
    el.addEventListener('shown.bs.tab', () => {
        dataTable.tables({ visible: true, api: true }).columns.adjust();
    });
});

new DataTable.Api('#ViewDetalhesRequisicaoOriginariosListagemTable').draw();

});

And here my partial view with the inputs and data table

@model TRF3.SISPREC.Web.Pages.ViewRequisicoes.DetalheModalModel
@{
<abp-row class="justify-content-between align-items-center">
<abp-column>
<abp-input asp-for="RequisicaoOriginariosViewModel.CodPessoaJuizo" disabled=true />
</abp-column>

    <abp-column>
        <abp-input asp-for="RequisicaoOriginariosViewModel.Email" disabled=true />
    </abp-column>

    <abp-column>
        <abp-input asp-for="RequisicaoOriginariosViewModel.CodSiafiUnidad" disabled=true />
    </abp-column>
</abp-row>

<abp-row class="justify-content-between align-items-center">
    <abp-column>
        <abp-input asp-for="RequisicaoOriginariosViewModel.Juizo" disabled=true />
    </abp-column>
</abp-row>

<abp-row class ="justify-content-between align-items-center">
    <abp-column>
        <abp-table striped-rows="true" id="ViewDetalhesRequisicaoOriginariosListagemTable" class="nowrap" />
    </abp-column>
</abp-row>

}

kthorngren

Are you using Bootstrap tabs?

Looks like you might be using a different framework. You might need to change this code:

document.querySelectorAll('button[data-bs-toggle="tab"]').forEach((el) => {
    el.addEventListener('shown.bs.tab', () => {
        dataTable.tables({ visible: true, api: true }).columns.adjust();
    });
});

To use a tab shown event for the framework you are using.

To help debug please post a link to a test case replicating the issue so we can see see your solution to offer suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

DudFelipe

Actually im using ABP Framework solution and its have a tag helper called <abp-tabs>... but in the end i think it's bootstrap based...

DudFelipe

Hey, i've already figured out whats is going on... the <abp-tab> tag from ABP Framework creates the tabs with <a> tag and not <button>... so i just need to change button[data-bs-toggle="tab"] to a[data-bs-toggle="tab"].

Thanks for the attention!!