[Resolved] Distance search filter to show on one line only

[Author]

Posts

[joelK-5]

I am trying to get the location search filter for distance to show on one line only. I have added a custom CSS class to WordPress as per this link

https://toolset.com/forums/topic/styling-distance-feature-how-to-display-on-one-line-and-only-show-km/?bbp_reply_to=2042025&_wpnonce=5f3b604a3c#new-post

My CSS code is:

.distance-search-block .form-group .form-group {
display: inline-block;
}

.distance-search-block .js-toolset-maps-distance-center {
width: 43% !important;
}

I then selected the CSS for the distance filter but it still shows stacked on top (see below).

I would appreciate any help please.

Kind regards,
Joel

[Minesh]

Hello. Thank you for contacting the Toolset support.

Can you please share problem URL where you added the distance search filter as well as admin access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin) 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]

I've added the following line of CSS code to your view's Custom CSS and JS section:

.singleline .form-group {
flex-direction:row !important;
}

I've also added the "singleline" as class name to your distance search filter's advanced tab's CSS classes box:
=> hidden link

In addition to that, you should add the class names without dot (.) sign. I've corrected that.

I can see the distance searrch output in single row: hidden link

[joelK-5]

Thanks Minesh,

That pointed me in the right direction. Flex-direction:row was still cutting off the row on mobile view. To fix it (and get my desired styling for all views), I used the following code in the View Custom CSS section:

.singleline .form-group {
display: inline-block !important;
}

.wpv-filter-form .js-toolset-maps-distance-value{
    display: inline-block !important;
    width: 5%;
    min-width: 100px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 20px;
    max-width: 5%;
}
 
.wpv-filter-form .js-toolset-maps-distance-unit {
    display: inline-block !important;
    width: 5%;
    min-width: 50px;
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 20px;
    max-width: 5%;
}
 
.wpv-filter-form .js-toolset-maps-distance-center {
    display: inline-block !important;
    width: 25%;
    min-width: 200px;
    max-width: 25%;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 20px;
}

.wpv-filter-form .js-toolset-maps-distance-current-location{
    display: inline-block !important;
     width: 25%;
     min-width: 200px;
     max-width: 25%;
     margin-top: 20px;
     border-color: #034f84;
     background-color: #034f84;
     color: white;
}

Then on the Custom Search Filter I attached the two CSS styles "wpv-filter-form" and "singleline"

Thanks so much for your assistance 🙂