How to get basic search builder working

mtodd

I'm trying to get the basic search builder to work. I loaded the JavaScript and CSS files and initialized it by adding the Q in the dom, as the reference on the basic example shows. The Add Builder button appears but when I click it, there is no data. I can't figure out how the basic search builder example shows the table headers as selection criteria and my button has nothing. Is there a step I'm missing? Can someone point me in the right direction? Thanks.

allan

Perhaps you can link to your page showing the issue so we can help to debug it please.

Allan

mtodd

Thanks for the response Allan. I made a little progress but I started a code pen here: https://codepen.io/mtodd28/pen/RwgPoaR

However, I see the basic search builder example has the same problem. You can click the data, the condition but you can't choose or enter a vale.
https://datatables.net/extensions/searchbuilder/examples/initialisation/simple.html

tangerine

Both your codepen and the DT example are working for me (with Chrome).

allan

@mtodd Are you using Safari by any chance? A fix for that landed today.

Allan

mtodd

Ahhhh, but not in Safari. Thank you for clarifying. I don't know if I can use this extension if it isn't cross browser compatible.

mtodd

@allan Yes, I'm using Safari.

mtodd

I have narrowed down my original issue. There is a conflict with the CSS that comes with materializecss library. When I load the library on my codepen, the data stops loading (or is somewhere off the page). When I comment out the CSS for the materialize css library, the search builder appears to work, in Chrome at least. Anyone else using Materialize have this issue?

colin

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

mtodd

@Colin Thank you. My codepen has an easy to see example. You can comment out block 6 that includes the materializecss stylesheet link and it will start working. I have comments in explaining it.

The codepen is located here: https://codepen.io/mtodd28/pen/RwgPoaR

sandy

Hi @mtodd ,

Materialize is setting the select elements to have the css property display: none, why I do not know!

We don't offer a styling integration for Materialize. You'll have to go through and manually override the styles that it is providing that affect SearchBuilder.

Thanks,
Sandy

mtodd

Thanks @sandy

I was just about to post here it's line 4 of the select stylesheet. I did an override of .dtsb-searchBuilder select {display: inline-block} and it fixed it. Now I just have to find the Safari patch and I'll be set. Thank you all for pitching in and helping find the issue. I'm really grateful and it's nice to know there is help when you need it.

sandy

Hi @mtodd ,

No worries!

The safari fix is in the nightly builds. The fix will be available in the next SearchPanes release which we hope will be in the next few weeks. In the mean time you can just use that link in your script tag.

Thanks,
Sandy

mtodd

Hi @sandy,

Do you know if this fix has been released yet? Also, are you saying it will be in SearchPanes? I don't think we use SearchPanes or load that extension. Will I need to include that to make the Custom Search Builder work?

Thanks,

Michael

sandy

Hi @mtodd ,

This fix has been released yes, you can get it from the latest cdn file.

No you won't need SearchPanes. Sorry about that I must have got mixed up when typing my response.

Thanks,
Sandy

mtodd

@sandy

Thank you very much!

Michael