[Resolved] Displaying the distance tool for maps

[Author]

Posts

[romanB-3]

Hello,
By default, the distance tool is shown vertically, with each element under the previous one. I'd like to align them all in one line, so added display:flex; but now it's not responsive anymore... I'd like these fields to be on one line if possible, and if screen is not large enough, the end of the line will be splited.
Please see hidden link
Thank you.

[Shane]

Hi Roman,

Thank you for contacting our support forum.

Would you mind providing a screenshot of what exactly you are referring so that I can understand better?

Thanks,
Shane

[romanB-3]

Here it is.
Thank you.

[Shane]

Hi Roman,

Thanks for the clarity.

You have the option use the bootstrap GRID setup since you have our views plugin installed. To enable bootstrap you will need to go to Toolset-> Settings -> Bootstrap Loading and enable bootstrap

Then you can take a look at the link below and organize the content in a GRID format so that it will show in line and also be response.
hidden link

Thanks,
Shane

[romanB-3]

Since I am using the starter toolset theme, I think Bootstrap is loaded already.
But anyway, the code for this line is this unique shortcode

[wpv-control-distance compare_field="geolocalisation2" distance_center_url_param="distance_center" distance_radius_url_param="distance_radius" distance_unit_url_param="distance_unit" inputs_placeholder="Résultats à moins de %%DISTANCE%% de %%CENTER%%" visitor_location_button_text="Utiliser ma localisation"][/wpv-filter-controls]

So I don't think I can divide the elements in containers manually ?

[Shane]

Hi Roman,

Would you mind providing me with admin access so that I can perform some test.

We may be able to get it inline without using display:flex.

The private fields will be enabled for your next response.

Thanks,
Shane

[Shane]

Hi Roman,

You are actually able to do this by using the bootstrap classes.

Take a look at my example below, it should allow you to display the elements inline

 [wpv-control-distance compare_field="geolocalisation2" distance_center_url_param="distance_center" distance_radius_url_param="distance_radius" distance_unit_url_param="distance_unit" inputs_placeholder="  <div class='row'> <div class='col-sm-4'>Résultats à moins de</div> <div class='col-sm-4'> %%DISTANCE%%</div> <div class='col-sm-4'> de</div> <div class='col-sm-4'> %%CENTER%% </div>" visitor_location_button_text="Utiliser ma localisation"]

Please let me know if this helps.
Thanks,
Shane