Since 2.1.3 the searchpane has no longer full width when collapsed

hleithner

Link to test case:
Sadly doesn't work, using searchpane on the test page returns Script 0 error

Debugger code (debug.datatables.net):
Not relevant

Error messages shown:
No Error message only annoying layout

Description of problem:
In 2.0 the searchpanes uses 100% (the same with as the table) for the search pane also in collapsed state. Since 2.1.3 the searchpanes in collapsed state has a fixed? width and if you open one of the search panes it resizes to 100% which is not so nice.

allan

I'm going to release an updated version of SearchPanes (and SearchBuilder) in the next few days to address this issue. It is because the centre position of the layout will collapse by default now.

I'd like to confirm your use case though - can you send me a screenshot and the init code for your DataTable?

Thanks,
Allan

hleithner

Sure, the bookingOptions is an empty object so not relevant

      // Set the relevant options for the booking table
      jQuery.extend(true, bookingOptions, {
        data: initialData,
        columns: [
          // This is the child toggler, the column is needed for the arrow button
          {
            data: null,
            defaultContent: " ",
            width: '1px', // still bigger then needed...
          },
          {
            data: 'booking.idBooking',
          }
          //...
        ],
        columnDefs: [
          {
            name: 'childtoggler',
            width: '40px',
            className: 'dtr-control',
            orderable: false,
            targets: 0
          },
          {
            searchPanes: {
              show: true
            },
            targets: [cols['service'], cols['company']] // just a position mapping
          }
        ],
        rowId: 'booking.idBooking',
        select: true,
        keys: false,

        searchPanes: {
          threshold: 0,
          // CascadePanes must be false since ajax reload breaks search panes with this option see
          // https://datatables.net/forums/discussion/79027/searchpanes-with-cascade-doesnt-work-after-ajax-reload/p1
          cascadePanes: false,
          initCollapsed: false,
        },
        layout: {
          top1: 'searchPanes',
        }
      });

      // Initialize Datatable, this includes the preloaded data object
      table = new DataTable('#bookingTable', bookingOptions);
      // We manuel set the ajax url late, else we have to wait till the request is loaded
      // since we have the data already in the view we directly provide a copy in the request
      table.ajax.url(ajaxUrl);![](https://datatables.net/forums/uploads/editor/f2/dbydlmeftufs.png "")
![](https://datatables.net/forums/uploads/editor/yj/ol1o5pt0cdmi.png "")

hleithner

allan

Thank you. I think I might actually need a link to a test case for this one please.

I've just tried to recreate the issue but unsuccessfully: https://live.datatables.net/sewicesi/1/edit .

Thanks,
Allan

hleithner

Thanks,

I can't replicate the issue on the test site, but it's also only center and doesn't has 100% width.

While comparing the html structure I found out that it differs and I forgot zu mention that I use boostrap5 template.