Tell us what you are trying to do?
I would like to style the form horizontally and inline and responsively using the Elegant Themes Divi theme which Toolset says we must not use Bootstrap with as per your documentation (https://toolset.com/documentation/recommended-themes/toolset-divi-integration/matching-divi-styling-using-toolset/#managing-divi-theme-bootstrap-incompatibility)
This is my code:
<div class="form-inline">
[wpv-filter-start hide="false"]
[wpv-filter-controls]
[wpv-control-post-taxonomy taxonomy="crew-type" type="select" default_label="-Any-" url_param="wpv-crew-type" style="color: #286da8; border-color: #286da8; background-color: transparent;"]
[wpv-filter-search-box class="form-control" placeholder="Search..." style="padding-right: 74px; color: #286da8; border-color: #286da8; background-color: transparent;"]
[/wpv-filter-controls]
[wpv-filter-submit class="et_pb_searchsubmit"]
[wpv-filter-reset class="et_pb_searchsubmit"]
[wpv-filter-end]
</div>
We want our filter / dropdown to look like this example on this page hidden link.
Is there any documentation that you are following?
I have looked at the following articles:
https://toolset.com/forums/topic/wpv-login-form-styling/
https://toolset.com/forums/topic/adding-css-classes-to-filter-forms/
https://toolset.com/documentation/recommended-themes/toolset-divi-integration/matching-divi-styling-using-toolset/
https://toolset.com/documentation/user-guides/displaying-content-using-grids/
Is there a similar example that we can see?
hidden link - this is the goal that we want
hidden link
hidden link (expand the Storybank Filters)
hidden link
What is the link to your site?
hidden link
DIVI is not compatible with Bootstrap and if you would like Bootstrap desing as shown on the fiddle, the right thing to do is not using DIVI but bootstrap themes or themes that accept Bootstrap.
We cannot help in adjusting CSS (conflicts) of 2 major frameworks that are not working nicely with each other.
You would either have to apply DIVI styles or Bootstrap Styles, which DIVI overwrites, so it's best not to load Bootstrap when using DIVI, there is not much that Toolset can change here.
We provide solutions as of how to adapt the parts of Views that need to be used on each site mostly:
https://toolset.com/documentation/recommended-themes/toolset-divi-integration/matching-divi-styling-using-toolset/
But for your case, I cannot recommend adapting more Bootstrap to a theme that natively does not support it or conflicts with.
In this case, I would probably suggest a change to a Theme that already works fine with it.
Hi Beda,
Thanks for your reply. As mentioned in the original post I am aware that I cannot use bootstrap. I have read the styling issues with Divi...
Is there a way to display the form inline without using bootstrap?
That is essentially my question.
Thanks,
Andrew
My issue is resolved for now ...
I resolved this issue by creating an html table in the text editor and copying and pasting the Toolset Views filter elements into this table to design a type of inline form layout. It is not ideal but it works with some issues.
