[Resolved] use my location css font button

[Author]

Posts

[David Gimenez]

Hi there.

I'm trying to change the css (fon, margin, line height padding of btn js-toolset-maps-distance-current-location but i can't get it. How can I do it.

Another thing. The icon of fantawesome of that button is missing, like in reference site of Realstate website.

=> hidden link

Is there any way to fix it? Thanks!

[Jamal]

Hello and thank you for contacting the Toolset support.

I was able to style, at least, the background of the button with the following CSS code, check this screenshot hidden link

input.btn.js-toolset-maps-distance-current-location {
    background: yellow;
}

If it does not work, update the code to:

input[type=button].btn.js-toolset-maps-distance-current-location {
    background: yellow;
}

Regarding the FontAwesome icon, make sure to load one of the FontAwesome styles from Toolset->Settings->General. Check this screenshot hidden link

[David Gimenez]

Hi Jamal.

First of all.... thanks for your time and answer.

Your css works fine but not with font-family.

I tried it in several ways and the font-family is missing. SO... how can I get to use a Roboto mono, or roboto, or lato or Arial in that button?. I can change the font in all places except in that button.

About fontawesome icon it doesn't work in 4.7 o 5.1. Always is broken, so I removed it with jquery

jQuery(document).ready(function($){
 
   $('.js-toolset-maps-distance-current-location').val('Use my location');
    
});

I'm using fontawesome 5 pro in the website and icons works fine, but all icons used by toolset (like as in buttons) are not loaded, except dashicons.

Thanks in advanced

[Jamal]

Can you provide a link to your website to let me check how we can customize the font of the button?
Unfortunately, Roboto is not loaded on our real estate site.

I'll then check the issue with the FontAwesome icon.

[David Gimenez]

Hi Jamal.

Try with other font like as arial, or monospaced.... It doesn't work.

In my site: -> hidden link

Thanks in advanced

[David Gimenez]

Hi Jamal

I got to customize the font with jquery.

$('.js-toolset-maps-distance-current-location').css('font-family', 'MyFamilyFont);

Solution in https://stackoverflow.com/questions/28868653/how-to-style-button-using-jquery

but the fontawesome issue it's not solved.

[David Gimenez]

However... any javascript solution don't work. Every time that results are updated (ajax) the font changes and text button.
Jamal... any idea to remove the icon or to load it right?
Thanks!

[Minesh]

Jamal is on vacation. This is Minesh here and I will take care of this ticket. Hope this is OK.

Toolset offers the JS even hooks that runs on AJAX request.

Please check the following doc:
=> hidden link
=> https://toolset.com/documentation/programmer-reference/adding-custom-javascript-code-to-views-that-use-ajax/

What you will require to do it, you need to add the same JS code to this AJAX JS event hook that you have added to document.ready event.

Please let me know if you will require further assistance on this.

[David Gimenez]

Hi Minesh and thanks for your answer.

I fixed the font and icon with js but I have the problem that every time that results update the button has an strange behaviour, so thats the reason that I want to use css and fix the issue with the fontawesome icon.

hidden link

You can see here wat happens -> 1-2 seconds that button renders again from the original state. Is there anyway to fix this?

[David Gimenez]

Hi again Minesh. It doesn't work in the expected way.

This is my code for document ready

jQuery(document).ready(function($){
 $('.js-toolset-maps-distance-current-location').val("Geolocalitza'm");
	$('.js-toolset-maps-distance-current-location').css('font-family', 'Basier mono circle regular');
	$('#toolset-maps-distance').hide().after("km"); 
       //If shown.bs.collapse add the unique id to local storage
    $(".collapse").on("shown.bs.collapse", function () {
        localStorage.setItem("coll_" + this.id, true);
    });
    //If hidden.bs.collaspe remove the unique id from local storage
    $(".collapse").on("hidden.bs.collapse", function () {
        localStorage.removeItem("coll_" + this.id);
    });
    //If the key exists and is set to true, show the collapsed, otherwise hide
    $(".collapse").each(function () {
        if (localStorage.getItem("coll_" + this.id) == "true") {
            $(this).collapse("show");
        }
        else {
            $(this).collapse("hide");
        }
    });
 }); 

If I follow your instructions to any event in map, pagination, custom search... like as an example

jQuery( document ).on( 'js_event_wpv_addon_maps_init_map_started', function( event, data ) {
 $('.js-toolset-maps-distance-current-location').val("Geolocalitza'm");
	$('.js-toolset-maps-distance-current-location').css('font-family', 'Basier mono circle regular');
	$('#toolset-maps-distance').hide().after("km"); 
       //If shown.bs.collapse add the unique id to local storage
    $(".collapse").on("shown.bs.collapse", function () {
        localStorage.setItem("coll_" + this.id, true);
    });
    //If hidden.bs.collaspe remove the unique id from local storage
    $(".collapse").on("hidden.bs.collapse", function () {
        localStorage.removeItem("coll_" + this.id);
    });
    //If the key exists and is set to true, show the collapsed, otherwise hide
    $(".collapse").each(function () {
        if (localStorage.getItem("coll_" + this.id) == "true") {
            $(this).collapse("show");
        }
        else {
            $(this).collapse("hide");
        }
    });
 }); 

But this donesn't work.

I f i want that this code work i must insert a jquery(document.ready) again like this

jQuery( document ).on( 'js_event_wpv_addon_maps_init_map_started', function( event, data ) {
	jQuery(document).ready(function($){
 $('.js-toolset-maps-distance-current-location').val("Geolocalitza'm");
	$('.js-toolset-maps-distance-current-location').css('font-family', 'Basier mono circle regular');
	$('#toolset-maps-distance').hide().after("km"); 
       //If shown.bs.collapse add the unique id to local storage
    $(".collapse").on("shown.bs.collapse", function () {
        localStorage.setItem("coll_" + this.id, true);
    });
    //If hidden.bs.collaspe remove the unique id from local storage
    $(".collapse").on("hidden.bs.collapse", function () {
        localStorage.removeItem("coll_" + this.id);
    });
    //If the key exists and is set to true, show the collapsed, otherwise hide
    $(".collapse").each(function () {
        if (localStorage.getItem("coll_" + this.id) == "true") {
            $(this).collapse("show");
        }
        else {
            $(this).collapse("hide");
        }
    });
 }); 
});

and this causes a 1-2 seconds delay to render the button.

Any idea to solve this?

Thanks in advanced!

[Minesh]

Can you please tell me when you are having the issue - when page is loaded or when you change the filter that trigger the ajax request and what is not working with the button exactly. if you can share screenshot that would be great.

Please share problem URL with access details and I'm happy to look at the issue further.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

As I can see you set the button text to "Usa la meva posició" from the distance search shortcode added to "Search and Pagination" section:

[wpv-control-distance default_distance="25" compare_field="adreca-del-negoci" distance_center_url_param="toolset_maps_distance_center" distance_radius_url_param="toolset_maps_distance_radius" distance_unit_url_param="toolset_maps_distance_unit" inputs_placeholder="Resultats en %%DISTANCE%% de %%CENTER%%" visitor_location_button_text="Usa la meva posició"]

Why dont you change the text you want to have there with the attribute "visitor_location_button_text"?

You should just try to change your desired button text with attribute "visitor_location_button_text" and I already set the font-family using the CSS within the CSS box:

.js-toolset-maps-distance-current-location {
font-family:"Basier mono circle regular" !important;
}

[David Gimenez]

Hi Minesh

Your solution for css works perfect. Thanks!

This Not ->

[wpv-control-distance default_distance="25" compare_field="adreca-del-negoci" distance_center_url_param="toolset_maps_distance_center" distance_radius_url_param="toolset_maps_distance_radius" distance_unit_url_param="toolset_maps_distance_unit" inputs_placeholder="Resultats en %%DISTANCE%% de %%CENTER%%" visitor_location_button_text="Usa la meva posició"]

I must to do it with js. Fontawesome fonts don't work. In the real state toolset reference happens the same. The fontawesome it's not rendered, and there is a square. You can see it here: hidden link
In my site happens the same and Jamal was looking for the solution. -> https://toolset.com/forums/topic/use-my-location-css-font-button/#post-1740567

About the js events... do you know why is not working if i don't insert in

jQuery( document ).on( 'js_event_wpv_addon_maps_init_map_started', function( event, data ) 

like as you seuggested me?

Thanks in adavanced

[Minesh]

I need to understand - do you want to add different text for location button when page is loaded first and when you filter the results?

What font-awesome icon you want to add to the butt - can you please clarify?

[David Gimenez]

Hi again Minesh, and sorry for my poor explanation

Look at the screenshots and you'll understand.

That's the reason that I must use jquery for the text of th button and not the the attribute "visitor_location_button_text (toolset visitor_location_button_text puts and icon that doesn't work).

The same problem here: hidden link (look at the icon of 'use my location')