[Resolved] Style distance filter

[Author]

Posts

[Dee_DeeA2948]

It appears that the functionality works-- but the appearance sucks. See attached image. Is there any styling I can apply? I tried looking at a few articles and applying the styling, but there were no visible changes.

#1. https://toolset.com/forums/topic/styling-the-distance-filter/
#2. https://toolset.com/forums/topic/style-map-distance-filter/
#3. https://toolset.com/forums/topic/styling-the-distance-feature-of-toolset-maps/

THIS IS THE STYLING THAT I HAVE APPLIED:
[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group">
<label>[wpml-string context="wpv-views"][/wpml-string]</label>
</div>
<div class="form-grouphorizontal"><font color="white">Search by Location (Press Enter to Search)</font>[wpv-control-distance distance_unit_url_param="toolset_maps_distance_unit" distance_radius_url_param="toolset_maps_distance_radius" distance_center_url_param="toolset_maps_distance_center" compare_field="address" default_distance="20" default_unit="mi"]
</div>
[wpv-filter-submit output="bootstrap"]
[/wpv-filter-controls]
[wpv-filter-end]

I don't know if there's anything that you can do to help point me in the right direction?

Thank you for your help!

[Luo Yang]

Hello,

It is a CSS problem, please provide the live problem URL, and take a screenshot for what are you going to achieve, I need to test it in my Chrome browser.

[Dee_DeeA2948]

Hi Luo. Thank you for your help.

1. The “Use my Location” Button doesn’t do anything. If possible, I would like to remove this button.
2. The measure field “mi/km” is SO LONG. It should be shorter in length.
3. The “Enter Location Field” is too short. You can’t see the preview text. When I’m searching cities, they get cutoff, so this should be longer. Also, is there a way to change the Enter Location preview text to say: "Enter City or Zip"
4. I also noticed some text “Show results within ____ mi of ____”. I don’t need this text. I would prefer to remove this. If I am not able to remove it, can I please change the font color to white?

I attached an image of what I am hoping to achieve. Note: It doesn’t have to look exactly like this.

*Live Link: hidden link
*The View is called: School Profile Search View with Pagination

[Luo Yang]

Hello,

Q1) The “Use my Location” Button doesn’t do anything. If possible, I would like to remove this button.

You can use CSS codes to hide it, for example:

.js-toolset-maps-distance-current-location{
display:none;
}

2) The measure field “mi/km” is SO LONG. It should be shorter in length.
For example:

.js-toolset-maps-distance-unit{
width:auto;
}

3) The “Enter Location Field” is too short.
For example:

.form-control js-toolset-maps-distance-center{
width: 20em;
}

4) I also noticed some text “Show results within ____ mi of ____”. I don’t need this text

That is place holder of distane filter field, please edit your post view(ID: 2040), in section "", find and edit the distance filter shortcode:

[wpv-control-distance distance_unit_url_param="toolset_maps_distance_unit" distance_radius_url_param="toolset_maps_distance_radius" distance_center_url_param="toolset_maps_distance_center" compare_field="address" default_distance="20" default_unit="mi"]

Setup attribute "inputs_placeholder" in above shortcode, for example:

[wpv-control-distance distance_unit_url_param="toolset_maps_distance_unit" distance_radius_url_param="toolset_maps_distance_radius" distance_center_url_param="toolset_maps_distance_center" compare_field="address" default_distance="20" default_unit="mi" inputs_placeholder="Something else"]

[Dee_DeeA2948]

Hi Luo! Thank you for providing the CSS styling for me. #1 & #2 work PERFECTLY! I had difficulty with your instruction for #3 & #4.
For #3: I entered the code into the CSS area (like #1 and #2), but it didn't make the location field longer. It just stayed the same size. I also tried changing the number from 20em to 80em (out of curiosity and there was no change).

For #4: I wasn't EXACTLY sure what you needed me to do? I'm sorry. (I tried entering the first line of code, replacing the old distance filter criteria. It didn't seem like anything happened. The second line of code contained this:
inputs_placeholder="Something else"]
When I inserted this code, it replaced all of my fields and simply said "Something else" with the submit button below it.

This is my latest code:

[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-grouphorizontal"><font color="white">Search by Location (Press Enter to Search.)</font>[wpv-control-distance distance_unit_url_param="toolset_maps_distance_unit" distance_radius_url_param="toolset_maps_distance_radius" distance_center_url_param="toolset_maps_distance_center" compare_field="address" default_distance="20" default_unit="mi" inputs_placeholder="Something else"]
</div>
[wpv-filter-submit output="bootstrap"]
[/wpv-filter-controls]
[wpv-filter-end]

I've attached an image, showing you what I see when it include the inputs_placeholder and one without it. (I highlighted the font so you could see it. It blends in with the background.) Ultimately, I want to remove this text entirely (if possible): Show results within ____ mi of ____. If it's not possible, I would at least like to remove the "of". If we can't remove the text, can we at least make it white?

Thank you for your help, Luo!

[Luo Yang]

Q3)Please try below CSS codes, and test again:

input.js-toolset-maps-distance-center{
{
width: 20em;
}

Q4) You can edit the post view (ID 2040), in section "Search and Pagination", find and select shortcode [wpv-control-distance ... ]
click button "Edit filter", in the following dialog window, setup the option "Text and placeholders for input fields", see screenshot placeholder.JPG

[Dee_DeeA2948]

Hi Luo. I tried inserting the following CSS that you provided and it still won't make that field longer. I'm not sure what to do?

input.js-toolset-maps-distance-center{
{
width: 20em;
}

[Luo Yang]

I have tested the CSS codes in the URL you mentioned above with my Chrome browser, it works fine, see screenshot: css-4.JPG

If you need more assistance for it, please provide a test site with the same problem, fill below private message box with the login details, I need to check it in a live website

[Dee_DeeA2948]

I have the staging website created. I don't see a private message box for me to share the credentials.

[Luo Yang]

Private message box enabled, please provide the test site credentials in it

[Minesh]

Luo is having a holiday today. He will get in touch with you tomorrow as soon as he will be back to work.

[Luo Yang]

Thanks for the details, I have done below modifications in your website:
Edit he post view: School Profile Search View with Pagination

hidden link

In section "Search and Pagination", click CSS editor, line 13~15, change the CSS codes as I mentioned above:

input.js-toolset-maps-distance-center{
width: 20em;
}

It works fine in front-end:
hidden link

Can you confirm it?

[Dee_DeeA2948]

My issue is resolved now. Thank you!