Split: styling distance search fields to show inline

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic is split from https://toolset.com/forums/topic/sorting-search-results-by-distance-from-the-closest-to-the-most-distant/

Tagged: Custom search, Toolset Blocks, Toolset Maps, Views, Views plugin

This topic contains 1 reply, has 2 voices.

Last updated by Waqar 5 months, 1 week ago.

Assigned support staff: Waqar.

Author

Posts

December 9, 2021 at 3:50 pm #2240729

prof.-dr.-dr.-juergenH

Dear Waqar,

Thank you for your reply. These are the points that we would still like to sort out:

2. What procedure would you recommend to bring all elements of the distance filter option into one line?

3. How can we delete the miles option in the distance field?

Thank you for your kind assistance.

December 9, 2021 at 4:51 pm #2240775

Waqar

Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

You can include some custom CSS code in the view's "CSS editor" to make the distance search fields appear in a single line:
( screenshot: hidden link )


.wpv-filter-form .js-toolset-maps-distance-value {
    display: inline-block;
    width: 5%;
    max-width: 5%;
}

.wpv-filter-form .js-toolset-maps-distance-unit {
    display: inline-block;
    width: 5%;
    max-width: 5%;
}

.wpv-filter-form .js-toolset-maps-distance-center {
    display: inline-block;
    width: 50%;
    max-width: 50%;
}

I'm afraid, there is no simple workaround available to remove the miles option from the unit selection field. The CSS code can be used to hide the unit selection field, but, then visitors will have no way of knowing what distance unit is being used, as there will be no label for it.

regards,
Waqar