[Resolved] Split: styling distance search fields to show inline

[Author]

Posts

[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.

[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