I am trying to style the filter items for a custom search in a wordpress Archive: Subject. I tried adding the filter controls into three equal-width columns using Bootstrap grid classes. I have the following code in my Filter Editor:
[wpv-filter-start hide="false"][wpv-filter-controls]
<h2>Find your lesson</h2>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3 class="label">[wpml-string context="wpv-views"]Grade:[/wpml-string]</h3>
[wpv-control taxonomy="grade" url_param="wpv-grade" type="select" taxonomy_orderby="slug" hide_empty="true"]
</div>
<div class="col-sm-4">
<h3 class="label">[wpml-string context="wpv-views"]Scope & Sequence:[/wpml-string]</div>
[wpv-control taxonomy="scope-sequence" url_param="wpv-scope-sequence" type="select" hide_empty="true"]
</div>
<div class="col-sm-4">
<h3 class="label">[wpml-string context="wpv-views"]Subject:[/wpml-string]</div>
[wpv-control taxonomy="subject" url_param="wpvsubject" type="select" default_label="Subject" hide_empty="true"]
</div>
</div>
<div class="row">
[wpv-filter-spinner container="div" position="after" spinner="<em><u>hidden link</u></em>"][/wpv-filter-spinner]
</div>
</div>
[/wpv-filter-controls]
[wpv-filter-end]
When I go to view the page, I expected to see the three dropdown select boxes evenly divided among the 3 columns, instead I am seeing that the 3rd column is wrapping below and there is also a lot of extra space below the filters now. See hidden link.
I am thinking that the reason the columns are wrapping is because the values inside one of the dropdowns is too long and it overflows by default. I would also like to apply the Bootstrap styles to the select dropdowns in order to fine tune their appearance (like provided here hidden link) -- but I don't see where I can attach any classes to a filter shortcode.
Hi, can you check your HTML syntax? It looks like your tags are mismatched in several places like so:
<h3 class="label">[wpml-string context="wpv-views"]Scope & Sequence:[/wpml-string]</div>
You're closing a div tag when instead you should close an h3 tag. This is the main reason your bootstrap columns aren't working as expected. Please fix these mismatched tags, then we can continue debugging. Thanks!
Woops!!! Got those fixed, now you can see that the middle dropdown is extending into the next column. I would like to style those dropdowns with Bootstrap class "selectpicker" instead.
Okay, now add classes like so:
[wpv-control taxonomy="subject" url_param="wpvsubject" type="select" default_label="Subject" hide_empty="true" class="my-class-name"]
You can make the selects behave by adding the following additional CSS:
.my-class-name {
width: 100%;
}
This will bump each one down to its own line, and force it to expand to fill the width of the column without overflowing.
Got it to work, thank you!
