Table header width don't align correct withe body width

Table header width don't align correct withe body width

JochenKJochenK Posts: 27Questions: 3Answers: 0

I have two tables, each in an accordion. In the test-case https://jsfiddle.net/owpa29dg/ you can see the 2.accordion is shown, the first not.
When i open the first accordion the header width is not aligned with the body width.But when I click on the header, it is getting aligned with the body width. The columns.adjust does not help.
Is there any solution or wordaround?

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    I took a look at the example, thanks for adding that, and it appears to be behaving for me (Chrome/Ubuntu). Could you give more details on your env and a screenshot to show the issue, please.

    Colin

  • JochenKJochenK Posts: 27Questions: 3Answers: 0

    thanks for your answer, here a screenshot with env details:

    Windows 11

    Microsoft Edge - newest
    Version 107.0.1418.42 (Offizielles Build) (64-Bit)

    Firefox - newest

    Version 106.0.5 (64-Bit)

    I also tried but without success:
    i gave <thead< or <tr> a class and scipting then $(".classname").click(); to the function

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    I suspect the problem is that the table in the first accordion is hidden when initialized. You will need to use columns.adjust() to recalculate the column widths when the accordion is displayed. Similar to the Bootstrap tabs example.

    Kevin

  • JochenKJochenK Posts: 27Questions: 3Answers: 0

    Hi Kevin,
    thanks... but as i have written in my posting, i tried columns.adjust() - it don't works.

    I am aware that the problem has to do with the hidden table in the first accordion.
    The main data of the table is displayed correctly, only the header isn't,

    Jochen

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    I don't see how you used column.adjust() in your test. You need to execute it after the first accordion is visible. Is that what you are doing?

    Kevin

  • JochenKJochenK Posts: 27Questions: 3Answers: 0

    The first accordion collapsed over the button.
    hmm.. what i tried was :

    I add [data-toggle="tab"] to the button in the first accordion
    then
    $(document).ready(function () {
    $('button[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
    });
    });

    Maybe I did something wrong or incomplete? did I miss something ?

    Jochen

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Take a look at the BS Accordion docs to learn the events needed. Note it says this:

    The accordion uses collapse internally to make it collapsible.

    Follow the Collapse docs to see what events are available. Looks like you will want to use shown.bs.collapse.

    Kevin

  • JochenKJochenK Posts: 27Questions: 3Answers: 0

    I've looked at everything you wrote.
    it's hard for me because i don't have that much experience in the field of JS.
    Could you help me or would that be asking too much?

    Jochen

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    Maybe something like this:
    https://jsfiddle.net/p9r20ky4/

    Kevin

  • JochenKJochenK Posts: 27Questions: 3Answers: 0

    so easy ... I see I have to deal more with the matter.
    But many thanks for your help ..
    Jochen

Sign In or Register to comment.