[Resolved] Styling search filters

[Author]

Posts

[lawrenceK]

For some reason any search filter fields I add to my project are not styled at all (i.e. no css applied). In all the tutorials and examples I've seen it seems as if they should take on the default CSS styling of the active theme, am I correct?

I would like to style the filter fields to display horizontally in columns instead of downwards in a single column. Since Divi does not play well with Bootstrap, I am unable to use the Grid feature in the view setup screen. I therefore tried to use the following code to create a table but this is not a responsive solution as the table is truncated on mobile screens..
link: hidden link

<div style="overflow-x:auto;">
<table>
<tr>
<td><div class="form-group">
<h4><label>[wpml-string context="wpv-views"]Categories:[/wpml-string]</label></h4>
[wpv-control-post-taxonomy taxonomy="category" type="select" default_label="Select a product category" url_param="wpv-category"]
</div></td>
<td><div class="form-group">
<label>[wpml-string context="wpv-views"]Tags[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="post_tag" type="checkboxes" url_param="wpv-post_tag"]
</div></td>
<td><div class="form-group">
<label>[wpml-string context="wpv-views"]Industries[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="industry" type="checkboxes" url_param="wpv-industry"]
</div></td>
<td><div class="form-group">
<label>[wpml-string context="wpv-views"]Manufacturer[/wpml-string]</label>
[wpv-control-postmeta field="wpcf-manufacturer" type="checkboxes" url_param="wpv-wpcf-manufacturer"]
</div></td>
</tr>
</table>
</div>

What are my options for either:
1) Having Divi styles applied to the fields
2) Using Divi to display the search fields
3) Using CSS to create a responsive layout

[Nigel]

Hi there

Toolset inherits basic styling for forms from Bootstrap, as well as using its grid.

Because Divi is incompatible with Bootstrap and you have to disable Bootstrap when using Divi, that's right, that basic styling of form elements is lost.

In that case, some Divi styles are picked up anyway, because—checking in the browser dev tools—it has some styles which are fairly generic for checkboxes etc.

There are probably other Divi styles for form elements that are not picked up, though, because they are based upon a particular markup structure or classnames that Divi outputs when generating form elements itself, which are likely to be different from what is output by Toolset form elements.

The markup for the form elements is not readily customisable—besides any wrapper div there is not much you can change. What you can do is add a class attribute to the filter control shortcodes and these will be added to the form elements. Where exactly it gets added depends on the control type. A checkbox, for example, will have the custom class added to the checkbox input. A dropdown will have the custom class added to the select element.

So you could examine a form made by Divi to see what class names are added to such elements, and then add these classes to your form controls as a class attribute on the relevant shortcodes.

Whatever is left in terms of styling would require manual tweaks.

You can likewise study what classes Divi uses for its grid and what markup structure, and then reproduce that structure with the required classes in the filter editor.

[lawrenceK]

Thanks Nigel. I'll keep lugging away at this.