Skip Navigation

[Resolved] Adding placeholder text inside a filter distance search bar

This thread is resolved. Here is a description of the problem and solution.

Problem:
Adding placeholder text inside a filter distance search bar

Solution:
To change the distance filter textbox placeholder text - you should try to add following code to your view's filter editor's JS box:

jQuery(document).ready(function($){
  $('#toolset-maps-distance-center').attr('placeholder','City, Zip Code');
});

You can find the proposed solution, in this case with the following reply:
https://toolset.com/forums/topic/adding-placeholder-text-inside-a-filter-distance-search-bar/#post-1236225

Relevant Documentation:

This support ticket is created 5 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 9 replies, has 2 voices.

Last updated by jessicaM-4 5 years, 2 months ago.

Assisted by: Minesh.

Author
Posts
#1236195
fetter_main_location_page.jpg

Tell us what you are trying to do?
I have a map page set up and generally functioning the way it needs. But I want to add placeholder text inside the blank search to help direct the end user.
Is there any documentation that you are following?
Tried multiple toolset forums and code no of which worked
Is there a similar example that we can see?
i will upload a screenshot of what im looking for.
What is the link to your site?
hidden link

#1236225

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

Well - to change the distance filter textbox placeholder text - you should try to add following code to your view's filter editor's JS box:

jQuery(document).ready(function($){
  $('#toolset-maps-distance-center').attr('placeholder','City, Zip Code');
});
#1236229
Screen Shot 2019-04-26 at 9.36.29 AM.png

Hello Minesh,

I came across your thread last night on this issue. I believe I attempted this and it did not work. Im attaching a screen shot of how I have it implemented and here is a link to the page where you can see its still not showing up. hidden link

#1236236

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

That is strang, would you mind to share access details so I can check whats going wrong there.

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

#1236247

Can i also ask you a quick question about another topic? Its about the map markers and how to edit existing marker popup windows. I can open a separate ticket if thats best?

#1236259

Yea its a tricky one. I tried so many things last night to get it to work. Im wondering if the way I have it set up is blocking us from adding the placeholder text?

#1236282

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Well - if you check the source code the placeholder attribute is added to the input field but its just not displaying.

<input type="text" min="0" id="toolset-maps-distance-center" name="toolset_maps_distance_center" class="form-control js-toolset-maps-distance-center js-wpv-filter-trigger-delayed js-toolset-maps-address-autocomplete" value="" placeholder="City, Zip Code" autocomplete="off">

Then I checked with my test installation and I see the same code is just working perfectly, Please check the following screenshot:
=> hidden link

I suspected there is some CSS or JS conflict and I was right. I just pressed CTRL + A on your page and I found that the text is already there with text box but its not visible due to some CSS conflict:
=> hidden link

Please resolve your CSS conflict and all seems good 🙂

#1236315

I removed all css that would conflict with this and it still does not show. Ill keep working at it.

#1236796

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Sure or ask or contact some CSS expert help here as a placeholder is already there.

#1237104

My issue is resolved now. Thank you!

This ticket is now closed. If you're a Toolset client and need related help, please open a new support ticket.