[Resolved] CSS for Distance Filter in Blocks

[Author]

Posts

[aaronW-4]

Tell us what you are trying to do?
I am trying to edit the css for the distance filter fields as well as the text. I have tried changing the label positions, which changes it from being inline or not, but I want the desktop and the mobile display to look like the attached images.
For some reason adding "display: inline" does not change the placement of the fields at all. I can change just about everything else except for showing it inline or not. Am I missing something?
Is there any documentation that you are following?

Is there a similar example that we can see?

What is the link to your site?
hidden link

[Raja Mohammed]

Hello there,

The Toolset Filter uses Bootstrap CSS by default to output the content, I see the The entire Filter is wrapped inside a form-group which is displayed in flex model for better control over the css i would suggest wrapping each of the filter fields with appropriate bootstrap classes,

In the View Search and filters fields, you can do something like, Feel free to use the bootstrap col-* class to adjust the display for the mobile screen

[wpv-filter-controls]
	<div class="form-group">
		<div class="row">
			<div class="col">
			    <label> Search Results with</label>
			    [wpv-control....]// for the distance
			</div>
			<div class="col">
			 
			    [wpv-control....] // for the dropdown
			</div>
			<div class="col">
			    <label>of</label>
			    [wpv-control....] // for the location
			</div>
		</div> 
	</div>
[/wpv-filter-controls]

I hope this helps better,

Kind regards
Raja

[aaronW-4]

I currently have the distance filter implemented with View Blocks. I am assuming I need to create the recommended code with the legacy version of Views? Do I have to create the entire View area in the legacy version or can I just create the distance filter in legacy and implement that into the Views block.

[Raja Mohammed]

With Blocks you can make use of the Toolset Grid Blocks to select a layout and Drag the Filters in to the grid cells.

Please check this quick video on how this can be done : hidden link

For more details about grid block refer : https://toolset.com/course-lesson/responsive-columns-and-grids/