Custom Settings Box (Checkboxes and buttons…)

[SoulaimaneAMRI23]

Hello Sir,

I hope you’re doing well.

We’re using Ajax Search Pro with filter settings containing checkboxes. The checkboxes are displayed vertically. We want to have them displayed horizontally in a responsive way that makes these checkboxes display in one to more lines depending on the device (2 lines for example for a desktop, 6 for mobile…).
We have the same request for the buttons (search and reset).
Could you please help in setting this changes ?

Many thanks in advance,

Kind Regards

[Ernest Marcinko]

Hi,

Sure, I can probably suggest something. Try this custom CSS:

.asp_filter_cf_classification .asp_simplebar-content {
    display: flex;
    flex-wrap: wrap;
}

.asp_filter_cf_classification .asp_simplebar-content legend {
    flex: 0 0 100%;
}

.asp_option_label {
    white-space: nowrap;
}

It should give you something like this: https://i.imgur.com/YyMNiPz.png

[SoulaimaneAMRI23]

Hello,

Yeah, it works ! Many many thanks for your help. However, we still have a small issue related to this. The version we used in our ticket in which the columns on the settings box is wide was made after modifying the width of each column in the file “asp_uploads/style.instances-is-po-co-ga-is.css”.
And we’ve set the width of the first column (Classification) in 36%, the second (horizon de placement) to 28% and the third (containing the buttons) to 28%

I think once there’s an update these changes will be lost (as it’s the case right now in the same link). Is there a way to make them through another method without changing anything in the stated file ?

Many thanks again and again for your support !

Kind Regards

[Ernest Marcinko]

Those files are dynamically generated, periodically they change, so I do not recommend editing them, as it will not be permanent.

For custmizations, always use custom CSS – use your theme custom CSS field (if it supports it) or use the custom CSS field on the search plugin back-end.

[SoulaimaneAMRI23]

Yes ! That’s what I tried first using the Divi theme options (in Divi) but it doesn’t work ! It was like the CSS classed in that file are not the ones to use to change the width of this settings box’s column. So, still wondering what are the appropriate CSS classes that control those elements.

Kind Regards

[Ernest Marcinko]

Well, it depends on the custom CSS code, but simply adding classes with properties may not have effect, because CSS specificity also plays a role. To override existing rules, higher specificy CSS code has to be used.
Simply put, if you have only a few rules, use the !important keyword to override the original CSS rules.

[SoulaimaneAMRI23]

Yes, done ! Many thanks

Have a nice day

[Author]

Posts