Two (tiny) problems with the appearance of my datatatable

xtlc

I have a totally fine working datatable which just has a little flaw: The regex search window is a line below the "search:" text. I already tried playing with the DOMoptions and different bootstrap stylesheets from datatables, but nothing worked so far.
When I use the debugger the only CSS problem reported is, I should not use border-collapse: collapse - which I did not define in any of my CSS - so I guess it is maybe in some of the bootstrap cdn links?

When using bootstrap4: it looks like this:

bootstrap5:

The second weird problem I have is, that I am unable to find a setting where the little arrows for sorting are displayed (see screenshot).

Debugger code (debug.datatables.net):
https://debug.datatables.net/izaxuv
Error messages shown:
The CSS for this table has border-collapse: collapse which is not supported by DataTables, particularly when scrolling is enabled. A collapsed border makes the column width calculations virtually impossible for alignment between columns. Please use border-collapse: separate and suitable border CSS statements to achieve the same effect.

kthorngren

Do the BS 4 and BS 5 examples look correct in your browser?

In order to help with styling issues we will need to see a running example of the problem. Please post a link to your page or a running test case showing the issues.

Try using the Download Builder to make sure you have all the correct files.

Kevin

xtlc

Thanks for your effort @kthorngren. The download builder does not support BS5 yet I think, but I am pretty sure the BS in general works (because the appearance changes if I switch between the themes). My project is not online ... I am thinking about how I could provide a working example.
Is there a way to get a download with BS5 preview included?

kthorngren

I am thinking about how I could provide a working example.

The key is to provide an example that shows the styling issue. We aren't worried about the specific data. Here are some options for a test case:
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

xtlc

@kthorngren I was able to copy the html in to the datatables live preview - the java is missing, but I think this is not important (also it broke the view a little bit).

http://live.datatables.net/bohopuxo/1/

Styling issues are clearly visible here:
* no hovering
* sorting arrows missing
* regex search in two lines instead of one

kthorngren

Fond a couple issues with your CSS includes:
http://live.datatables.net/jujohake/1/edit

I made these changes:

        <!-- Bootstrap CSS -->
        <!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">     
  <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap5.min.css">

Changed to use bootstrap5 CSS and to load the dataTables.bootstrap5.css.

See the CSS tab of the Bootstrap 5 Integration example.

Kevin

xtlc

This was very good help! Thank you a lot sir/mam!