Column headers bunched together

Column headers bunched together

menashemenashe Posts: 159Questions: 35Answers: 1

In the Editor, my column headers (for a type: datatable) are bunched together.

(I did just spend a day switching to Bootstrap 5; everything--except that--looks great!)

How do I fix this?

Answers

  • colincolin Posts: 15,142Questions: 1Answers: 2,586

    Odd, that would suggest one column has wide data - as it should automatically adjust the columns. There are a few things you could try, such as setting columns.width, or manually recalculating the width with columns.adjust().

    If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • menashemenashe Posts: 159Questions: 35Answers: 1

    Hi Colin,

    Thank you! However, all of the examples (that I found) apply to the DataTable table.

    Can you please give me some direction and pointers as to how I would accomplish this in the Editor Form on the type: datatable?

    Thanks!

  • kthorngrenkthorngren Posts: 20,253Questions: 26Answers: 4,761

    I did just spend a day switching to Bootstrap 5

    Are you loading all the Datatables and Editor styling libraries for Bootstrap 5?

    Use the Download Builder to get the appropriate files. You can also look at the Javascript and CSS tabs of this example.

    Kevin

  • menashemenashe Posts: 159Questions: 35Answers: 1

    I just now used the Download Builder. (It looks as though I had all of the tables anyway.)

    Everything looks good--except for the bunched up columns in the type: datatable in the Editor form.

    I do not understand how I might set columns.adjust() in an Editor form.

  • kthorngrenkthorngren Posts: 20,253Questions: 26Answers: 4,761
    edited March 2023

    It might work with the open event. You might need to use it like this:

    $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
    

    I don't recall anyone stating this problem before. I wonder if something changed in the editor code that @allan might need to look at.

    Kevin

Sign In or Register to comment.