[Resolved] Styling distance feature: how to display on one line and only show km?

[Author]

Posts

[eloiseT]

Tell us what you are trying to do?
The distance feature appears on four lines although there's plenty of space to fit on one line. I am trying to put it on one line.
Using CSS code, I have managed to remove the dropdown list to select the unit. However, I haven't managed to add "km" after the number using JS code.

Is there any documentation that you are following?
I used CSS and JS code from: https://toolset.com/forums/topic/styling-the-distance-feature-of-toolset-maps/

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

I tried to view your website, but it was password protected.

To troubleshoot, why the script isn't working and suggest the next steps, I'll need to see exactly how this distance filter is set up.

Can you please share temporary admin login details, along with the link to the page with this distance filter?

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for sharing these details.

I was able to make the distance search filter show in a single line, using these steps:

1. In the custom class field for the distance search filter block, I added a class "distance-search-block".
( screenshot: hidden link )

2. Next, to make the items in the distance search filter block, show in a single line, I included this CSS code in the view's "Custom CSS" section:
( screenshot: hidden link )

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

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

3. And to append the 'km' text, I included this slightly updated script in the "Custom JS" section:

jQuery(document).ready(function(){
  jQuery('.js-toolset-maps-distance-unit').after('<span>km</span>');
});

[eloiseT]

My issue is resolved now. Thank you!