[Resolved] Change font and remove icon for My Location button

[Author]

Posts

[jean-francoisB]

I am trying to:

Change the font and remove the icon for My Location button

Link to a page where the issue can be seen:

hidden link

I have tried solutions from those two posts :

https://toolset.com/forums/topic/styling-my-location-button/
https://toolset.com/forums/topic/customising-search-form-using-maps-distance-filter-q3/

In both cases, it's working, but at the moment I do a search by choosing an option from a dropdown, the icon is coming back. I want to remove the icon permanently.

How can I do that?

Thank you!
Jeff

[Luo Yang]

Dear Jeff,

Since you are using AJAX search feature, you can use JS event "js_event_wpv_parametric_search_results_updated" to trigger your custom JS codes, for example:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
    /**
    * data.view_unique_id (string) The View unique ID hash
    * data.layout (object) The jQuery object for the View layout wrapper
    */
        
YOUR CUSTOM JS CODE GOES HERE
       
});

[jean-francoisB]

Hi Luo. Sorry for the delay. I've been busy in the last few days.

Your suggestion still doesn't work for me. When I load the page at first, the icon is still there. When I choose a option from the dropdown, the icon appeir for a fraction of a second and disappear. It doesn't look great. I would like the icon not shown at all.

This is what happen when you navigate on the page : hidden link

Thank you!

[Luo Yang]

1) Change the font
You can use CSS codes "!important" to override the default style of location button, for example:

input.js-toolset-maps-distance-current-location {
 font-size:26px !important;
}

You can put above above CSS codes into your theme file style.css, this will avoid the transmission problem:
"a second and disappear"

2) remove the icon
I have checked it in the source codes of Toolset Maps plugin, the icon codes is hardcoded, see plugin file \toolset-maps\includes\toolset-views-maps-distance-filter.php, line 1005~1007:

            <input type="button" class="btn js-toolset-maps-distance-current-location" 
                value="&#xf124; $use_my_location_translated" style="font: normal normal normal 14px/1 FontAwesome;"
            />

"" is the font awesome icon, and the JS event "js_event_wpv_parametric_search_results_updated" will be triggered after AJAX search result is completed, it conducts the problem as you mentioned above:
the icon applied for a fraction of a second and disappear.

I have escalated this issue to our 2nd tier supporters, check if it is possible to take it as a feature request.

So currently, you might need to consider this:
1) Disable Ajax search feature
2) Use the custom JS codes you mentioned above to change the input button text:
https://toolset.com/forums/topic/change-font-and-remove-icon-for-my-location-button/#post-1239459
3) Use the CSS codes I mentioned above to style the button text

[Luo Yang]

Here is the feedback from our 2nd tier supporters, you can add a feature request for it here:
https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

Our developers will evaluate it. Thanks for the patience.

[jean-francoisB]

Thank you very much! I have finaly kept the Ajax search but I have edited the toolset-views-maps-distance-filter.php by erasing the icon and puting the font I want. It work like a charm. Of course, it should be more easy to edit that button. I will make a request like you suggested. Thank you very much!!