Unable to put View Filter Side by Side with View Results

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to display search filters in one column and results in another column.

Solution: Check your HTML syntax and Bootstrap grid structure.

Relevant Documentation:
https://getbootstrap.com/docs/3.3/css/

This support ticket is created 5 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

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.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Views, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by KentS9937 5 years, 9 months ago.

Assisted by: Christian Cox.

Author

Posts

March 30, 2019 at 2:41 pm #1223406

KentS9937

I am trying to display a view on a page with the filters in the first column and the view results in the second column. What I'm seeing is one column on top of the other, rather than side by side.

Here's the code I used in the View output editor.

<div class="row">
	<div class="col-sm-2">[wpv-filter-meta-html]</div>
	<div class="col-sm-10">[wpv-layout-meta-html]</div>
</div>

My site uses the Avada theme. The page displaying this view uses is built with the Layout editor and not the Avada Fusion Builder.

Link to a page where the issue can be seen: hidden link

I expected to see the view filters in column 1 and the view results in column 2.

Instead, I got column 1 on top of column 2.

March 31, 2019 at 3:44 pm #1223524

Christian Cox

Hi, it looks like you have some invalid HTML code in your View's Search and Pagination editor. Check here:

[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group">[wpv-control-post-taxonomy taxonomy="collection" type="select" default_label="Collection" url_param="wpv-collection"]</div><div class="form-group"> [wpv-filter-search-box output="bootstrap"][wpv-filter-reset reset_label="Reset Filters" output="bootstrap"]</div>
</div>
</div>
[/wpv-filter-controls][wpv-pagination][wpv-pager-nav-links output="bootstrap" previous_next_links="true"][/wpv-pagination]
[wpv-filter-end]

At first glance, I see at least two unnecessary closing div tags. These extra closing elements are breaking the grid, so the browser isn't putting your two columns in the same row. Check your syntax and make sure your HTML markup is valid, then if the grid isn't working please let me know and I'll take another look.

March 31, 2019 at 4:07 pm #1223526

KentS9937

My issue is resolved now. Can't believe I missed that. Thanks!