[Resolved] Styling View/Checkbox Options

[Author]

Posts

[abbyJ-2]

Tell us what you are trying to do? I'm having trouble centering my shortcode search on my homepage [wpv-form-view name="home-page-search" target_id="718"]. On the View itself, I can't seem to center the search form, left align the sort filter (even though it's already left aligned...) or clear my search results so they don't stagger like they are now. I also have random '?'s in my code? I'm a mess!

As for checkbox options, essentially I'm trying to make dropdown checkboxes, which I know isn't readily available, but possibly can be coded in? I'd like to do this for all, if not some of my current dropdowns.

Is there any documentation that you are following? Looked at too many to count, now I'm here! Ahh!

Is there a similar example that we can see? Essentially trying to build this bad boy: hidden link

What is the link to your site? hidden link

[Waqar]

Hi,

Welcome to Toolset support and I'd be happy to assist.

To troubleshoot these points, I'll need to see how the view is set up in the admin area.

Can you please share temporary admin login details in reply to this message?

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar]

Thank you for sharing these details.

I noticed that some of the styles from the theme are applying to the search form fields, changing their overall alignment.

To overcome this, you can add the following CSS code in the view's "Custom CSS" section and the form will be centered on both pages:
( screenshot: hidden link )

.wpv-filter-form .wpv-custom-search-filter,
.wpv-filter-form .wpv-custom-search-filter-submit {
float: none;
display: inline-block;
}

This will also fix the alignment of the sorting filter.

As for the results, the view is set to show results in the unformatted loop style and the 3 blocks ('image', 'heading' and 'fields and text') are added in the view loop, without any container or wrapper.
( screenshot: hidden link )

You can either change the loop style to "Grid" or at least add a "container" block inside the view loop block and then nest the 3 blocks ('image', 'heading' and 'fields and text') inside it, which will give you more control and flexibility on the design of individual result item.

The question marks were the result of using a non-breaking space HTML entity as space.
( screenshot: hidden link )

I've replaced that with simple space and that is fixed too.

Your observation about the collapsable checkboxes section is correct and it is not available out-of-the-box. For this, you'll need to add some fairly complex custom CSS and JS code.

I hope this helps and for more personalized assistance around custom code, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

[abbyJ-2]

Thank you Waqar, your help is invaluable!

I've done what you have suggested as far as styling for Views, however I'm having trouble getting my text to float to the right of my images within my containers in my view.

I have an additional search on the same home page that I am trying to center as well. I tried the same code, as well as looked at the code to try and center it, but it's not working the same. Thoughts on this? It's the alphabet search. I have other issues with it, but I will open a separate ticket to address those issues.

Thank you!

[abbyJ-2]

Hi Waqar,

Disregard my first paragraph--I figured it out! Thank you!

[Waqar]

Thanks for the update and glad that my message helped.

I'm not seeing any view under the "Climate Lit by Issue" heading on the homepage.

Can you please share the link where this view can be seen?

[abbyJ-2]

Thanks Waqar--I hired an external consultant who works with Toolset to help me out. I appreciate your assistance!