[Resolved] Custom search filter

[Author]

Posts

[ilonaB-2]

My previous support ticket was answered by Jamal. Thanks for the extensive support, however not everything was resolved, see below:

Tell us what you are trying to do?

1. At the top of attached image, I'd like the text "show results within" not to show. So far I haven't been able to hide this on the front-end, please help me out here.
1. I only want to show the 2 fields, in the image marked with: "5" & "Enter a location"
a. I want to hide the text "show results within" & "of" on the front end (orjust have it deleted alltogether).
b. I want to hide the "Mijn locatie" button on the front-end.
c. I want the km/mi dropdown not to show and only show the tekst "km" behind the numbers field for how many km's.

2.When all of the above works I also want to show those 3 fields on the same row as the other fields in the searchbar. check this url for the way it currently is setup (hidden link).

3. If possible I'd like to change the order in which they show ->
- 1. the "enter a location" field
- 2. the "5"field
- 3. the "km" field (and if possible I'd prefer not to have a dropdown where users can manually change between km & mi since i only want "to use the "km" indicator.

Is there any documentation that you are following?
The last reply i got from Jamal about my previous support ticket i advised me on checking these similar cases:

This will need custom CSS for it. Check these similar cases:
- https://toolset.com/forums/topic/styling-distance-feature-how-to-display-on-one-line-and-only-show-km/#post-2041405
- https://toolset.com/forums/topic/distance-feature-display-in-one-line-and-only-show-km/#post-2053233

For some reason this didn't work, the theme i'm using is Astra Pro

What is the link to your site?
- hidden link

The attached image "searchbar preview" is how i want the layout to be on the front end.
Please help/advise me how to achieve this.
If i need to add custom code please help me out, since I have no experience using any code.

Hope you can get back to me asap.
Thanks in advance

[Nigel]

I was able to achieve the requirements you specified with the following CSS added to the View:

/* Hide text nodes for unwanted text */
#distance-search-wrapper {
    font-size: 0px;
}

/* Change order of inputs */
#distance-search-wrapper .wpv-custom-search-filter__input .form-group {
    flex-direction: row-reverse;
}

/* Reset font size on location input */
#toolset-maps-distance-center {
    font-size: 1rem;
}

/* Reset font size on distance input and limit width */
#toolset-maps-distance-value {
    width: 6rem;
    font-size: 1rem;
}

/* Append KM text after distance input */
.wpv-custom-search-filter__input .form-group::before {
    content: 'KM';
    font-size: 1rem;
    padding: 8px 0 0 0;
}

/* Hide distance unit selector */
select[name="toolset_maps_distance_unit"] {
    display: none;
}

/* Hide My Location button */
input.js-toolset-maps-distance-current-location {
    display: none;
}

I commented the CSS so that it should be clear what you may want to change (e.g. font sizes) to tweak the appearance.

[Waqar]

{ticket status updated}

[ilonaB-2]

Hi Nigel,

Thank you so much for the CSS code. This helps a lot. However not everythimg i needed was resolved:
1. I deleted the "KM" content because there was no way of adjusting the text color.
a. Is there way to change the box with the distance in KM? (now it's only possible to choose any number for the distance).
- Would it be possible to show: "+# km" for instance + 5 km?

2. Even though you helped me alot with the layout it still isn't showing the entire searchbar in one line.
a. If possible it like to have the distance box next to (right side of) the center location. Can you provide me with the CSS code for
that? See attached image for the way it's showing at the moment.

Since i'm constantly working on the site, the best url to check is: mijnwingman.nl/zoekresultaat-1.

Thank you in advance!

Regards

[Waqar]

Hi,

Thanks for the update and glad that Nigel's code helped.

1. I've performed a number of tests using custom CSS and JS scripts, but couldn't make the distance field show some additional text (like KM). This is because it is a number type field and not a simple input field and any attempt to transform the numeric value, breaks the distance search's functionality.

For this reason, I'm afraid, the best option would to use the approach Nigel shared earlier, of appending the text after the field.
(I've included the CSS code for that with some adjustments below).

2. To make all the search form fields shown in one line, you can include the additional custom CSS code:
( screenshot of the resulting look: hidden link )

/* Append KM text after distance input */
.wpv-custom-search-filter__input .form-group::after {
    content: 'KM';
    font-size: 1.1rem;
    color: #ffffff;
}

/* Execute on screens with the min-width of 782px */
@media screen and (min-width: 782px) {
    /* Force the location and distance fields to show inline */
    .wp-block-toolset-blocks-grid-column .wpv-custom-search-filter-label-bottom .form-group, .wpv-custom-search-filter-label-top .form-group {
        flex-direction: row !important;
    }

    /* Style adjustments for the location field so it can fit inline */
    #toolset-maps-distance-center {
        max-width: 70%;
        float: left;
        display: inline-block;
        margin-right: 10%;
        width: 100% !important;
        height: calc(1.5em + .75rem + 2px);
    }

    /* Style adjustments for the distance field so it can fit inline */
    #toolset-maps-distance-value {
        max-width: 20%;
        float: left;
        display: inline-block;
        width: 100% !important;
        height: calc(1.5em + .75rem + 2px);
        margin-right: 2%;
    }
}

Here are some useful guides on using CSS media queries and inspect element tool to see the applied CSS code:
hidden link
hidden link

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[ilonaB-2]

Hi waqar,

Thanks so much!

This works perfect!

My issue is resolved now. Thank you!