[Resolved] Change the layout of the Toolset Maps Distance – Filter widget

[Author]

Posts

[simchaH]

Hi,

I am trying to figure out how to input the toolset maps distance widget as an inline form going horizontally, as opposed to going downwards. I took a look at the bootstrap docs but I was unable to figure out exactly what code I need to place in which location in order for it to work. Would you be able to help?

See screenshot below, without horizontal formatting it creates a lot of extra white space.

Thanks

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hello,

Thank you for getting in touch.

Any changes to this area will need to be done using CSS as the filter section is rendered as one html block.

If you provide me with a link to the page that has the search I should be able to provide some advice on it.

Thanks,
Shane

[simchaH]

Here is the link to the page: hidden link

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hello,

I checked on this for you and based on how the HTML for this field is rendered, it won't be possible to have the fields inline with each other.

Thanks,
Shane

[simchaH]

Can you tell me what I need to do in order to make it render properly? I don't mind changing it, I just need direction

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Sim,

For clarity when you say render properly you want it to be aligned with your other filters correct even if the filter itself is in 2 lines?

Based on what I see on the frontend there is an empty column beside the filters. Can you send me a screenshot of your view on the backend ?

Thanks,
Shane

[simchaH]

Here is an image of how my backend looks. I deleted the distance widget, but the arrow that I am pointing at in the image is where I had it input. I would like it spanning across the area that I have highlighted in red.

I don't care about this specific layout, I just want it to work. Meaning, if I need to delete those blocks and create a row with just one block that the distance widget will go into, that's fine. I just want it to work.

Thank you

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hello,

If it is a case where you want the distance filter to be in one line then it won't be possible to achieve. This is due to how the HTML structure is rendered.

So you will always have the distance filter split between multiple line.

Thanks,
Shane

[simchaH]

I am confused. This is what I meant the whole time and you said it's possible with CSS? Can you please look at this ticket: https://toolset.com/forums/topic/styling-the-distance-feature-of-toolset-maps/

This person has same issue as me and he used some sort of styling to make it inline. Why can't that be done for me?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hello,

It would appear the solution to this is being outlined in the response below.
https://toolset.com/forums/topic/styling-the-distance-feature-of-toolset-maps/#post-1381471

If you provide me with admin access and re-add the distance field I should be able to adopt this solution for your site.

I've enabled the private fields for your next response.

Thanks,
Shane

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Sim,

I've done an exhaustive check on the site and attempted the solution from the posted ticket.

However the solution is specific to the customer's use case. As noted in the ticket as well Christian wasn't able to provide a solution for the customer on having the fields display inline.

This comes down to how the fields are laid out in the HTML below.

<div class="form-group">Show results within 			
<input type="number" min="0" id="toolset-maps-distance-value" name="toolset_maps_distance_radius" class="form-control js-toolset-maps-distance-value js-wpv-filter-trigger" value="5" required="">
			<select class="js-toolset-maps-distance-unit form-control js-wpv-filter-trigger" name="toolset_maps_distance_unit" id="toolset-maps-distance">
				<option value="km" selected="selected">km</option>
				<option value="mi">mi</option>
			</select> of 			
<input type="text" min="0" id="toolset-maps-distance-center" name="toolset_maps_distance_center" class="form-control js-toolset-maps-distance-center js-wpv-filter-trigger-delayed js-toolset-maps-address-autocomplete pac-target-input" value="" placeholder="Enter a location" autocomplete="off"><input type="button" class="btn js-toolset-maps-distance-current-location" value="Use my location">
</div>

As you can see the fields are not block level elements which makes it difficult to display them inline. I've also tried to use the css that the customer provided but it doesn't work for this case either.

At this point I would recommend that you open a feature request with our team to have this implemented as a pure CSS based solution proves difficult to achieve based on how the fields are listed out.

To open a feature request you will need to go to the link below.
https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

From there you will need to provide as much detail about the feature as possible.

Once you've submitted the feature request it will be reviewed by our team and assigned a priority based on user requests for said feature.

It should be noted as well that this can take a bit of time to go through the entire process

Thanks,
Shane

[simchaH]

Issue is not resolved, but I am going to attempt to input some code to make it work