[Resolved] Styling the distance filter in blocks

[Author]

Posts

[RensV5812]

Tell us what you are trying to do?
I'd like to change the look of the distance filter. I would want the fields of the filter displayed horizontally instead of vertically. Also I would want to change the text "show results within ... of". Then I would prefer if the user didn't have the option to pick between km and miles (just km) so no need for this field.
Another question related to this topic: is it possible to only show the placename in a view instead of the whole address? For example instead of showing "Teslastraat 133, 1098 VG, Amsterdam, The Netherlands" just show "Amsterdam".
For reference, the site is a job board so users wouldn't right away be interested in the full address, just a general location is sufficient.

Is there any documentation that you are following?
-

Is there a similar example that we can see?
-

What is the link to your site?
hidden link

[RensV5812]

Update:
I have found the way to change the filter text already.

[Nigel]

There are no options for styling individual parts of the filter controls other than the label.

Changes that you make to the styling, e.g. coloured borders, would apply to all the inputs.

If you specifically wanted to hide the units selector (km or miles) then you would need to add CSS for that.

There isn't a way to readily add custom CSS to the page.

You could add a custom HTML block to the page and then include the required CSS rules inside style tags, like so:

<style type="text/css">
select[name="toolset_maps_distance_unit"] {
  display: none;
}
</style>

The address field contains the full text of the address as formatted by the Google API, there isn't a way to display just a part of it.

You would need to pass the address through a custom shortcode which used regular expressions to isolate the part you required, and that would depend on a consistent format for all addresses and would be vulnerable to breaking easily.

[RensV5812]

Got it, thanks again for the quick reply.

[RensV5812]

Just another question: how do I change the placeholder value of the distance filter?

Right now it says 'Enter a location'. I want to translate it to Dutch. How would I do it?

Rens