How to change searchBuilder button text at depth?

karkiekie

Even in the examples for changing searchBuilder button text, it only changes the outermost button, yet the button to add an additional condition still shows the default "Condition".

colin

I'm not clear what you mean, the "Condition" button is definitely showing different text in this example - https://datatables.net/extensions/searchbuilder/examples/customisation/language.html .

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

karkiekie

This is wonderful! Thank you! Let me try this out. Thank you Colin!

karkiekie

This is great Colin. Will you please tell me how I can remove the "Right" and "Left" options (I don't want that functionality at all), and how I can remove the little 'x' at the bottom of the "And"/"Or" sideways button? I want to keep the "And"/"Or" sideways button, I just don't want the 'x' on the bottom of it.

You're a great help!

colin

For the left/right, you can set the searchBuilder.depthLimit to be 1, i.e. disabling embedded conditions. For the 'x', you can do that with plain CSS.

Please see both here: http://live.datatables.net/sufexanu/1/edit

Colin

karkiekie

Oh. I see. Thank you on the Depth, I didn't realize that applied to the Left/Right. As far as the visibility:hidden for .dtsb-clearGroup; notice what happens when you hover over that button.

colin

I think that's unavoidable, without changing the code to remove it entirely. It's open-source, so that's an option,

Colin

karkiekie

Got you. One last thing please.

How to change color of hovered over item in the ddls i.e:

div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-condition option.dtsb-option:hover{
background-color: red;
}

I have tried > option:hover, > option: focus and many other ways. Will you please advise?

colin

This thread should help, it's asking the same thing.

Cheers,

Colin

karkiekie

In that thread they are changing the background color of all or 1 item in the ddl. I only want to have background color on hover. I've tried this:

        div.dtsb-searchBuilder > div.dtsb-group > div.dtsb-criteria > select.dtsb-data.dtsb-dropDown > option:hover {
            background-color: red !important
        }

Please advise. If I take away the :hover, it works for background of all items. I only want the color on hover over each item.

allan

I'm not sure that is possible in CSS/ HTML. The select shown is controlled by the OS rather than being an HTML component. There might be a pseudo selector suitable for the active item, but I'm not sure what it would be if so. StackOverflow might be the place for such a question.

Allan