[Resolved] Align distance filter value and unit on the same line

[Author]

Posts

[Piotr_M4693]

Hey Jamal,

I managed to put the Distance Filter, but I am having trouble to place it on the website properly as it is treated as a one field.
I would like to have for example "30" and next to it "km"

hidden link

Thanks

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+01:00)]

I tried to target this filter with CSS but I get all the elements of the filter aligned on the same line, not only the value and the unit. Check this screenshot hidden link

So, I worked around it with custom Javascript to put those two files inside a parent element and it produced the desired design. Check this screenshot hidden link

jQuery(function($){
	formGroup = $('.wpv-custom-search-filter__input .form-group')
	wrapper = $('<div></div>')
	formGroup.find('.js-toolset-maps-distance-value').before(wrapper)
	wrapper.append(formGroup.find('.js-toolset-maps-distance-value'))
	wrapper.append(formGroup.find('.js-toolset-maps-distance-unit'))
})

I placed the code inside the view's custom Javascript section, check this screenshot hidden link

[Piotr_M4693]

Thanks, that looks much better,

however,

1. Distance filter looks ok on Chrome, but on Safari it does not look great, see the screenshot

2. The things i would like to have access to are explain in the screenshot

Cheers

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+01:00)]

Regarding the coordinates, that's how the filter works when we click on the "Use my location" button. The input accepts text to search for known addresses, then Toolset works with coordinates.

I can't currently test on Safari, but I think that the issue will reappear after each AJAX call, because the custom code that I added did not support AJAX calls, I'll fix it and try to test in Safari.

Regarding customizing labels "Show results within" and "of", the block does not allow a way to customize it right now. We can work around it with a custom Javascript code. But let me first approach our 2nd Tier about it and get back to you.

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+01:00)]

After analyzing the origin of the labels "Show results within" and "of", I understood that we can customize the output of the distance filter from the block options without needing any custom Javascript code. The custom string should include placeholders for the distance filter and the address input. Check the following value where I changed the word "results" to "organizations", and I put the distance placeholder inside a div to make it align in the same row:

Show organizations within <div class="one-line">%%DISTANCE%%</div> of %%CENTER%%

Check this screenshot hidden link

I hope this helps. Let me know if you have any questions.

[Piotr_M4693]

Thanks for that

What about the thing to instead showing the coordinates, it would show, the Post code or name of the place, is it possible to do anyhow?

also

Is it possible to change the values going one by one kilometr, it is a bit annoying as it is updating every time you click to increase or decrease the distance

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+01:00)]

What about the thing to instead showing the coordinates, it would show, the Post code or name of the place, is it possible to do anyhow?
As I explained in my previous reply(#1851079), the location address can search with addresses, but when the user clicks on the "Use my location" button, we get coordinates. That's also a limit on Google Maps API, not all the coordinates return valid addresses, some coordinates can return "not found" message.

Is it possible to change the values going one by one kilometr, it is a bit annoying as it is updating every time you click to increase or decrease the distance
Currently, there is no way to customize the steps to increase/decrease this number field, we can work around it by adding custom Javascript code to change the steps parameter of the input. I have tested this code on the view and it works as expected(step=10).

jQuery( document ).on( 'ready js_event_wpv_parametric_search_form_updated', function( event, data ) {
	jQuery('.js-toolset-maps-distance-value').attr('step', 10);
});

[Piotr_M4693]

Hello

Where did you place the jquery code?

1. Is it possible to make the Distance filter to be just a field or dropdown, so the user can type himself or choose the distance from the dropdown?

2. How can I make the organisations to appear when user puts the filters, I would like to have the organisations View to be empty when getting on the page

3. How can I make the yellow background of the bottom block to be the full size as the footer(see the screen shots)

Thanks

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

https://toolset.com/forums/topic/make-the-radius-input-a-dropdown-in-distance-filter/

https://toolset.com/forums/topic/hide-results-until-the-user-enter-a-value-in-the-filters/

https://toolset.com/forums/topic/footer-section-is-not-fulwidth-as-in-the-homepage/

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+01:00)]

I placed the code inside the view's custom Javascript section, check this screenshot hidden link

For support rules, we are able to handle only one issue at a time. This helps us to bring you a better service and also helps other users to find all the information here exposed. For that reason I have created additional tickets for each of your questions, I'll be posting my replies there.

If you believe that the original request for this ticket has been handled, please mark this ticket as resolved. Otherwise, elaborate more on what is still missing.