[Resolved] Formatting set of checkboxes in custom search

[Author]

Posts

[christopherL-3]

Tell us what you are trying to do?
I want to format a set of checkboxes in my custom search to look in line with the rest of the search filters
Is there any documentation that you are following?
I don't think so
Is there a similar example that we can see?
I will upload an image
What is the link to your site?
hidden link

[Waqar]

Hi Christopher,

Thank you for contacting us and I'd be happy to assist.

By default, the Toolset plugins don't apply additional styles to the input elements like checkboxes, so that the overall styling remains consistent with the rest of the website.

Can you please share the link to a page where this view from the screenshot can be seen?

I'll be in a better position to guide you accordingly.

regards,
Waqar

[christopherL-3]

Ok, should I also give you access to the website codes so you can look at the view ?

Here is the link : hidden link

[Waqar]

Thank you for sharing the link.

The checkboxes are shown using the Bootstrap libraries default styles, but they appear to be different than the other fields as there is no white background behind the checkboxes container.

You can use custom CSS code to apply some white background around the checkboxes so that they become more prominent in front of the background picture.

I can share some pointers in the right direction, but for that, I'll need to see how this view is set up in the admin area. You're welcome to 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.

[christopherL-3]

This is the type of dropdown we are looking for.

[Waqar]

Thank you for sharing the admin access.

To make the search form and checkboxes inside it, show in a more symmetrical and clean layout, you can update the content in the view's "Search and Pagination" section to:

[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="row">
	<div class="col-md-12">
		<div class="form-group">
			<label for="wpv-post-search">[wpml-string context="wpv-views"]Search by Chalet name[/wpml-string]</label>
			[wpv-filter-search-box placeholder="Chalet name" output="bootstrap"]
		</div>
	</div>
</div>
<div class="row">
	<div class="col-md-3">
		<div class="form-group">
			<label for="wpv-mphb_ra_location">[wpml-string context="wpv-views"]Location[/wpml-string]</label>
			[wpv-control-post-taxonomy taxonomy="mphb_ra_location" type="select" default_label="All Locations" url_param="wpv-mphb_ra_location"]
		</div>
	</div>
	<div class="col-md-9">
		<div class="form-group">
			<label for="wpv-mphb_room_type_facility">[wpml-string context="wpv-views"]Amenities[/wpml-string]</label>
          	<br class="clear">
			[wpv-control-post-taxonomy taxonomy="mphb_room_type_facility" type="checkboxes" url_param="wpv-mphb_room_type_facility"]
          	<br class="clear">
		</div>
	</div>
</div>
<div class="row">
	<div class="col-md-6">
		<div class="form-group">
			<label for="wpv-position">[wpml-string context="wpv-views"]Positions[/wpml-string]</label>
			[wpv-control-post-taxonomy taxonomy="position" type="select" default_label="All Positions" url_param="wpv-position"]
		</div>
	</div>
	<div class="col-md-6">
		<label for="wpv-catering">[wpml-string context="wpv-views"]Catering[/wpml-string]</label>
		[wpv-control-post-taxonomy taxonomy="catering" type="select" default_label="All Catering Options" url_param="wpv-catering"]
	</div>
</div>
[/wpv-filter-controls]
[wpv-filter-end]

And then include some custom CSS code in the "CSS editor" tab, below it:
( screenshot: hidden link )

.wpv-filter-form {
background: #fff;
padding: 25px 20px;
}

@media only screen and (min-width: 800px) {
.wpv-filter-form .form-group .form-check {
width: 30%;
float: left;
}
}

As for the dropdown design shown in the screenshot that you've shared, I'm afraid, it is not included in Toolset plugins, out-of-the-box. For that, more complex CSS and JS script code customizations will be needed, which are beyond the scope of support that we can provide, over the forum.
( ref: https://toolset.com/toolset-support-policy/ )

For more personalized assistance around custom code, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

I hope this helps.

[christopherL-3]

Thank you that's great ! Could you give me the CSS code to make the white background become transparent grey ? I will show you an example.

[Waqar]

Thanks for writing back.

You can use any color picker tool to get the desired color and its transparency, for example:
hidden link
hidden link

.wpv-filter-form {
    padding: 25px 20px;
    background: rgba(221, 221, 221, 0.65);
}

Tip: Using "opacity" CSS property would dim down the entire search form's container and not just the background, so it should be avoided.

[christopherL-3]

Thank You !!

I have one last question. For the checkboxes, we would want results that show accommodation with all checkboxes selected (and not properties that have only one of the checkboxes). Do you understand what I mean by that ?? For example, if I select cinema and swimming pool, I would only want search results of chalets with both, and not chalets with only one of my criteria.

New threads created by Waqar and linked to this one are listed below:

https://toolset.com/forums/topic/split-changing-search-filter-type-from-any-to-all/

[Waqar]

You're very welcome.

As for the new question, I've split it into a new ticket and will reply to it shortly.
( https://toolset.com/forums/topic/split-changing-search-filter-type-from-any-to-all/ )

Please feel free to mark this ticket as resolved and start a new one for each new question or concern.