[Resolved] Styling the Distance Filter

[Author]

Posts

[J S]

This is a helpful post on how to style the Distance Search filter, https://toolset.com/forums/topic/style-map-distance-filter/

It says you can style some pieces of the filter for example:

[wpv-control-distance inputs_placeholder="MY OWN Show results within %%DISTANCE%% of %%CENTER%%" visitor_location_button_text="MY OWN Use my location" ...]

but can you elaborate a bit more?

Specifically...

1. How can I make the width of the distance input box narrow, or better yet, only as wide as the distance value selected? I may want different widths for each field in the filter, for example the distance value box may need to be 100px, while the unit box may need to be 30px and the location field box may need to be 300 px.

2. How can a slight radius be applied to the corner of the entry boxes for this search only, and not globally throughout the site?

3. How can an glyphicon be included as a placeholder inside of the entry boxes?

4. What other parameters can be changed for each of the components of the distance search filter?

5. How can I make this filter optional if it is used with a search text box and I don't require a location to be entered?

Thanks

[Christian Cox]

Hi, our support policy is to address one question per ticket, so please open separate tickets in the future when you have more than one question. Thanks for helping us keep things organized!

1. How can I make the width of the distance input box narrow, or better yet, only as wide as the distance value selected? I may want different widths for each field in the filter, for example the distance value box may need to be 100px, while the unit box may need to be 30px and the location field box may need to be 300 px.
You can apply custom CSS using the Search and Pagination CSS editor panel. Since different themes and plugins affect search input widths in different ways, it is not possible for me to give you a single cut and paste solution for this. The requirements are different for different sites. My best advice is to use a CSS selector that targets the input names.

input[name="buttonName"] { 
  width: 30px;
}

https://css-tricks.com/how-css-selectors-work/
https://css-tricks.com/specifics-on-css-specificity/

2. How can a slight radius be applied to the corner of the entry boxes for this search only, and not globally throughout the site?
Basic CSS selectors can help you target individual forms. Each View has a numeric ID that can be found in wp-admin. Each View's search form name attribute is created with that numeric ID, so you can target that form name:

form[name="wpv-filter-12345"] input {
  /* add your border radius here */
}

https://css-tricks.com/how-css-selectors-work/
https://css-tricks.com/specifics-on-css-specificity/

3. How can an glyphicon be included as a placeholder inside of the entry boxes?
How is the same glyphicon rendered outside of the form - what markup is used? You may be able to add that markup inside the input field's placeholder attribute. However, the only input field that has documented support for a custom placeholder attribute is the text search field. You can see the documentation for each control field here: https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-filter-controls

4. What other parameters can be changed for each of the components of the distance search filter?
Right now you can manipulate the same criteria you can manipulate when you insert the Distance search filter. I will attach a screenshot here.

5. How can I make this filter optional if it is used with a search text box and I don't require a location to be entered?
There is currently not an easy way to make the distance filter optional once it's added to a search View. One approach here is to create multiple search forms, where one has a distance filter and the other does not. Use links to direct Users to the other form if they do not want to include a distance filter. If you'd like to suggest an improvement to the distance filter, feel free to create a new "suggest improvement" ticket here in the forum and include your thoughts.

[J S]

Ok so for questions 1 and 2 I nee a little more help....

If my shortcode is the following:

  [wpv-control-distance inputs_placeholder="Show Spaces within %%DISTANCE%% of %%CENTER%%" 
  visitor_location_button_text=" " default_distance="1000" default_unit="mi"  compare_field="address" distance_center_url_param="toolset_maps_distance_center"  distance_radius_url_param="toolset_maps_distance_radius" distance_unit_url_param="toolset_maps_distance_unit"]

then, how do I target individual elements within the shortcode with css? When I attempt to insert html within the "[" and "]" the html doesn't work.

Can you please give specifics on targeting each of the components in the above shorcode with different styling so that I can tweak it?

[Christian Cox]

then, how do I target individual elements within the shortcode with css?
Let's say there is an input field generated by this shortcode. You need to know the input field's name attribute to target it with CSS. Use the Browser Inspector on the front-end of the site to inspect the input field. See the attached screenshot. You want to target the input field with the name toolset_maps_distance_radius, so you place this CSS in the Search and Pagination CSS panel (in the View editor screen in wp-admin):

input[name="toolset_maps_distance_radius"] {
  border: 10px solid red;
}

Your theme and other plugins may or may not apply other styles to all input fields. You may have to override those styles with your own styles. You'll have to fix those issues on a case-by-case basis using specificity and CSS selectors. For example, if you wrap your shortcode with a div that has the class "only-these-inputs", you can target only the inputs inside that div:

<div class="only-these-inputs">
[wpv-control-distance inputs_placeholder="Show Spaces within %%DISTANCE%% of %%CENTER%%"
visitor_location_button_text=" " default_distance="1000" default_unit="mi"  compare_field="address" distance_center_url_param="toolset_maps_distance_center"  distance_radius_url_param="toolset_maps_distance_radius" distance_unit_url_param="toolset_maps_distance_unit"]
</div>

.only-these-inputs input {
  border: 10px solid red;
}