SearchBuilder wrong condition placement

MadBoyEvo

Link to test case:

https://jsfiddle.net/MadBoy/pxfw7ebs/

Description of problem:

I tried basic SearchBuilder functionality. After I added it whenever I press AddCondition button And/or go out of bounds

I noticed I can fix it using

        <style>
        div.dtsb-logicContainer {
            width: auto !important
        }
    </style>

But it only works until the button And is clicked. As soon as it changes to Or the width is overwritten and things get broken again. Is it something I can fix or something on SearchBuilder that needs to be fixed?

tangerine

Are you referencing the SearchBuilder's CSS file?

MadBoyEvo

As you can see in attached jsfiddle

        <link href="https://cdn.datatables.net/searchbuilder/1.0.1/css/searchBuilder.dataTables.min.css" as="style" type="text/css" rel="stylesheet preload prefetch" />
        <script src="https://cdn.datatables.net/searchbuilder/1.0.1/js/dataTables.searchBuilder.min.js"></script>

colin

It's because you're over-riding the styles in your code - if you remove this it'll behave as expected:

        <style>
            body {
                font-family: 'Roboto Condensed', sans-serif;
                font-size: 8pt;
                margin: 0
            }

            input {
                font-size: 8pt
            }
        </style>

Colin

MadBoyEvo

Well no. It's actually one setting -> font-size: 8pt; -> when I remove this from the body everything starts to work. This seems a bit overkill that I can't use the font-size I want to use in a body right? I have to use exactly 12pt. If I use 10pt it will break as well.

MadBoyEvo

What's weirder is that if you add

    <style>
    div.dtsb-logicContainer {
        width: auto !important
    }
</style>

OR/AND only is broken on the first condition. If you add the second condition it works properly. So this really seems like a bug to me. If font-size matters that's pretty inconvenient.

sandy

Hi @MadBoyEvo ,

I agree with you that SearchBuilder should be able to cope with different font sizes. I've raised an issue internally (DD-1881 for my reference) and will report back here when there is an update. Probably on Friday.

In the mean time for the font sizing, you can just set SearchBuilder to use the 12pt font that it wants to use as follows.

            body {
                font-family: 'Roboto Condensed', sans-serif;
                font-size: 8pt;
                margin: 0
            }
            div.dtsb-searchBuilder {
              font-size: 12pt;
            }

            input {
                font-size: 8pt
            }

I'm afraid that the fix here isn't going to be as simple as setting width to auto. The logic button is positioned and given it's dimensions using jQuery. It needs to be rotated 90 degrees, have it's width set (which is actually in a vertical direction now) according to how many criteria are in place and then be positioned correctly.

Thanks,
Sandy

MadBoyEvo

Thank you Sandy - I do understand that it's complicated! Thank you for confirming that this is a lib issue rather than my poor knowledge.

sandy

Hi @mdesmond ,

That should be the issue fixed now as you can see at this example. This will be available in the next SearchBuilder release which we hope will be in the next few weeks. Until then you can access the fix from the nightly builds.

Thanks,
Sandy

MadBoyEvo

Link to nightly build is dead and pointing to searchPanes. I guess those two are the ones I need. Thank you

• https://nightly.datatables.net/searchbuilder/js/dataTables.searchBuilder.js
• https://nightly.datatables.net/searchbuilder/css/searchBuilder.dataTables.css

sandy

Yes those are the ones you need.

Apologies, I copied them and then missed the last bit when I changed it.

Thanks,
Sandy