[Resolved] Distance feature: Display in one line and only show km?

[Author]

Posts

[anandS-4]

Tell us what you are trying to do?
I am trying to display the Distance feature in one single line.

Is there any documentation that you are following?
https://toolset.com/forums/topic/styling-distance-feature-how-to-display-on-one-line-and-only-show-km/

There is a solution to this problem but I am unable to solve it on my website.

Is there a similar example that we can see?
It's in the real estate example.

What is the link to your site?
hidden link
Password: Apricus@123

Waqar has solved this issue. Please look into my site if possible and resolve it asap. My assignment is due on Monday. Please help.

[Christian Cox]

Hello, I am not seeing the "distance-search-block" CSS class added to the distance filter as shown in the other ticket:
https://nimb.ws/gLpEfO
That's the first thing I would check in the View editor screen. If it's still not working as expected after adding the required CSS class to the filter block, I may need to log in and take a closer look. Please provide login credentials in the private reply fields here.

[Shane]

Hello,

Christian is currently on a public holiday today but he will be back tomorrow to continue assisting you with this one.

Thank you for the patience and understanding.

[Christian Cox]

You should edit the page containing the View. I believe it is here:
hidden link

In the Block Editor, you should select the Custom Search Filter block that contains the distance filter. In the sidebar, open the Advanced panel and add the CSS class in the CSS Classes field. Type the classname and then type Enter or Return to set the class. Then save the Page.

I am attaching another screenshot here for you. You can see the distance filter block selected, and the CSS Class input field in the Advanced sidebar panel.

[anandS-4]

I see you have added the CSS for this particular problem but it didn't resolve my issue.

I still see the distance block in multiple lines.

[Christian Cox]

I see you have added the CSS for this particular problem but it didn't resolve my issue.
That is odd, because if I remember correctly this CSS code was already added when I checked the site on May 9...I do not recall adding this CSS myself. The CSS is added in the Customizer's Additional CSS panel, but I do not remember adding it myself. I remember seeing the CSS but not seeing the classname added to the filter, so that is why I recommended adding the CSS classname next. Anyway, not a big deal but it's strange that you are under the impression I added the code.

It looks like the Submit and Cancel buttons were in the same grid row as the distance filter elements. That prevented the inputs from extending full-width. I moved the distance filter block above the grid containing the submit and cancel buttons, and removed the 220px top-margin from both of those buttons. I hope that's okay, I assume this is what you want to achieve here. Let me know if I misunderstood, but I think you need the full-width here to display all the distance filter elements in one line.

Here are the changes I made in the Customizer's CSS panel. The main problems were the width of the distance number input and the display mode of the nested .form-group element. I also hid the "km" select field since the other ticket discusses adding the text with JavaScript.

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

.distance-search-block.wpv-custom-search-filter>* input[type=number] {
	width: 70px;
}

.distance-search-block.wpv-custom-search-filter .js-toolset-maps-distance-unit {
	display: none;
}
 
.distance-search-block .js-toolset-maps-distance-center {
width: 43% !important;
}

You can adjust this code as needed to tweak the design, it's just an example.

[anandS-4]

My issue is resolved now. Thank you!