[Resolved] Search Filter with Bootstrap styles

[Author]

Posts

[Brent Urbanski]

Tell us what you are trying to do? Use Bootstrap Dropdown with Taxonomy Filter in Views

Is there any documentation that you are following? Bootstrap element instructions via Views bootstrap options

What is the link to your site? Working local

Hello,

Is there a way to populate a Bootstrap dropdown element with a View's filter options (select dropdown)? Ive tried various approaches but can't get it to work.

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
[wpv-control-post-taxonomy taxonomy="business-field" type="select" default_label="All Fields" url_param="wpv-business-field" output="legacy"]
</div>

[Christian Cox]

The wpv-control-post-taxonomy shortcode is designed to output actual form elements like a standard select field, or a group of checkboxes or radio buttons. It's not designed to output the custom markup required for a Bootstrap-style Dropdown element, though. If you want to create and use a custom Dropdown element as a Views filter, it will require a significant amount of custom code using HTML, JavaScript, CSS and PHP. That level of customization is not provided here in the forums, but you may find a Contractor on our Contractors Portal that can provide professional assistance. Here's the forum link: https://toolset.com/contractors/

If you're comfortable writing your own code, you can find information about our query filter API here:
https://toolset.com/documentation/programmer-reference/views-filters/#wpv_filter_query

[Brent Urbanski]

Darn. For consistency in design throughout a website, it would be very helpful to allow for Boostrap styling in Views filter dropdowns so they match CRED form dropdowns.

Will you please submit this request to your dev team?

[Christian Cox]

I'm not quite sure I understand what you are asking. I was referring to the Bootstrap Dropdown Component:
hidden link
Neither CRED nor Views uses this, so I'm not sure what you mean by consistency here. Can you show me screenshots of the two different dropdowns you described? I would like to see each one on your site.

[Brent Urbanski]

Sorry, Christian. I haven't created a Bootstrap form yet, so I was making some assumptions. I thought applying bootstrap styling to a CRED form would automatically style default dropdowns as Bootstrap dropdowns.

Nevertheless, it would be nice to use Bootstrap dropdowns and checkboxes, as I've learned that it's extremely challenging style the default browser-styled versions.

From what I've read it is best to style the default with javascript and css, so I'm about to head that direction. Please let me know if you have any other suggestions.

Thanks,
Brent

[Christian Cox]

CRED and Views select fields can use Bootstrap form input styles if you tell Toolset to include Bootstrap in Toolset > Settings > General > Bootstrap Loading. In CRED form shortcodes, you have the option of using Bootstrap styles or not by modifying the shortcode attributes. So select tags in Views shortcodes and CRED forms will have similar styles except in one specific case - CRED form parent post select fields. A parent post select field with more than 15 options will be displayed using a slightly different style that allows users to type and search for an option. This format tends to work better with lots of options, whereas a simple select field is easier to use with fewer options. I am attaching some screenshots showing the difference between these two fields. Note that this is on a default theme Twenty Seventeen. Custom themes may or may not affect the display of these input fields.