Search Results for 'filter style'

[Anonymous]

Hello,

My issue is the same as the one mentioned here https://support.searchandfilter.com/forums/topic/select2-group-hierarchal-styling/

Back in 2017 it seems there was no solution available.

Using Select2 I would like to be able to style the dropdown options depending on their hierarchical level. For example on this page: https://hautlescours.fr

I don’t see how it would be possible with CSS but maybe there are alternatives.

Thanks,

Nicolas

[Anonymous]

Hey there,

Just wondered if you could help. I have a website under development and I need to display a list of ‘products’ that can be filtered by both a list/checkboxes of applications and a list/checkboxes of materials. I’m using Portfolio items to create these products and tagging them appropriately to portfolio tags or categories to create my taxonomies.

I’ve purchased search and filter pro and also downloaded your wpbakery addon. I’m using Impreza theme, with wpbakery vers. 6.0.5. WordPress vers. is 5.2.4. I have my page set up where I would like this to all display – with the s&f form being pulled in using the wpbakery widget on the right – and my wpbakery grid element on the left. I have listed the full URL of this page in the s&f form settings, as well as selecting the visual composer post grid from the dropdown in display settings.

Might be missing something, but I can’t find any way within my grid element to specify s&f as the data source. Is this because the vers. of wpbakery I’m using is no longer using the ‘post grid’ element, but rather an updated version just called ‘grid’? I can pull the portfolio items in ok when using the s&f shortcode – although this displays all portfolio items, whether they are tagged to the taxonomy terms or not and obviously not styled as I want them. Sorry for the longwinded ramble! Any help would be appreciated!

[Anonymous]

I am using the two shortcodes like this on each page. Each page has a different ID and I have 10 different pages.

[searchandfilter id=”11443″]
[searchandfilter id=”11443″ show=”results”]

Inside the settings, loading results with AJAX (all checked). Also I only return results which match specific post meta data.

for example:
br_category = “Style”

I suppose it might just be easier for the function to go through the custom post type “Brands” and count all the posts which have the custom field: br_category = “Style” ?

[Anonymous]

When we use the Elementor class name given in the documentation to create the filtered results, it is throwing off the Elementor built in styles for the post grid version. Any advice on how to fix this?

[Trevor]

On the appearance of the form, this custom CSS should override your theme:

.widget .textwidget .searchandfilter ul li {
  list-style: none;
  display: block;
}
.widget .textwidget .searchandfilter ul {
  margin: 0px;
}
.searchandfilter input.sf-input-checkbox[type="checkbox"] {
  vertical-align: top;
  margin-top: 4px;
}
.searchandfilter li[data-sf-field-input-type=checkbox] label {
  width: calc(100% - 32px);
}

[Trevor]

This is how I would change it:

<?php
/**
 * Portfolio Template.
 *
 * @package Fusion-Core
 */

// Do not allow directly accessing this file.
if ( ! defined( 'ABSPATH' ) ) {
	exit( 'Direct script access denied.' );
}
if ( ! class_exists( 'Avada' ) ) {
	exit( 'This feature requires the Avada theme.' );
}
?>
<?php
global $wp_query, $fusion_library;

// Get main settings and mofify as needed.
$portfolio_layout_setting      = Avada()->settings->get( 'portfolio_archive_layout' );
$portfolio_one_column_text_pos = Avada()->settings->get( 'portfolio_archive_one_column_text_position' );
$portfolio_text_layout         = Avada()->settings->get( 'portfolio_archive_text_layout' );
$portfolio_content_length      = Avada()->settings->get( 'portfolio_archive_content_length' );
$portfolio_text_alignment      = Avada()->settings->get( 'portfolio_archive_text_alignment' );
$portfolio_columns_int         = Avada()->settings->get( 'portfolio_archive_columns' );
$portfolio_column_spacing      = Avada()->settings->get( 'portfolio_archive_column_spacing' );
$portfolio_pagination_type     = Avada()->settings->get( 'portfolio_archive_pagination_type' );
$portfolio_image_size          = Avada()->settings->get( 'portfolio_archive_featured_image_size' );
$portfolio_image_size_set      = $portfolio_image_size;
$lazy_load                     = Avada()->settings->get( 'lazy_load' );

if ( ! $portfolio_text_layout ) {
	$portfolio_text_layout = 'unboxed';
}

switch ( $portfolio_columns_int ) {
	case 1:
		$portfolio_columns = 'one';
		break;
	case 2:
		$portfolio_columns = 'two';
		break;
	case 3:
		$portfolio_columns = 'three';
		break;
	case 4:
		$portfolio_columns = 'four';
		break;
	case 5:
		$portfolio_columns = 'five';
		break;
	case 6:
		$portfolio_columns = 'six';
		break;
}

$portfolio_layout = 'fusion-portfolio-' . $portfolio_columns;

// Set the portfolio main classes.
$portfolio_classes[] = 'fusion-portfolio fusion-portfolio-archive';
$portfolio_classes[] = 'fusion-portfolio-layout-' . $portfolio_layout_setting;
$portfolio_classes[] = $portfolio_layout;

// If one column layout is used, add special class for text/notext and floated.
if ( 'one' === $portfolio_columns ) {
	if ( 'no_text' === $portfolio_text_layout ) {
		$portfolio_classes[] = 'fusion-portfolio-one-nontext';
	} elseif ( 'floated' === $portfolio_one_column_text_pos && 'grid' === $portfolio_layout_setting ) {
		$portfolio_classes[] = 'fusion-portfolio-text-floated';
	}
}

// For text layouts add the class for boxed/unboxed.
if ( 'no_text' !== $portfolio_text_layout ) {
	$portfolio_classes[] = 'fusion-portfolio-' . $portfolio_text_layout;
	$portfolio_classes[] = 'fusion-portfolio-text';
	$portfolio_classes[] = 'fusion-portfolio-text-' . $portfolio_text_alignment;
}

// Add class if rollover is enabled.
if ( $fusion_settings->get( 'image_rollover' ) ) {
	$portfolio_classes[] = 'fusion-portfolio-rollover';
}

// Set the correct image size.
$portfolio_image_size = 'portfolio-' . $portfolio_columns;

// Portfolio-four no longer exists.
if ( 'four' === $portfolio_columns ) {
	$portfolio_image_size = 'portfolio-three';
}

// Portfolio-six no longer exists.
if ( 'six' === $portfolio_columns ) {
	$portfolio_image_size = 'portfolio-five';
}

if ( 'full' === $portfolio_image_size_set || 'masonry' === $portfolio_layout_setting ) {
	$portfolio_image_size = 'full';
}

$post_featured_image_size_dimensions = avada_get_image_size_dimensions( $portfolio_image_size );

// Get the column spacing.
$column_spacing_class = ' fusion-col-spacing';
$column_spacing       = ' style="padding:' . ( (int) ( $portfolio_column_spacing / 2 ) ) . 'px;"';

if ( 'one' === $portfolio_columns && 'grid' === $portfolio_layout_setting ) {
	$column_spacing_class = '';
	$column_spacing       = '';
}

// Check pagination type.
if ( 'load_more_button' === $portfolio_pagination_type ) {
	$portfolio_classes[] = 'fusion-portfolio-paging-load-more-button';
} elseif ( 'infinite_scroll' === $portfolio_pagination_type ) {
	$portfolio_classes[] = 'fusion-portfolio-paging-infinite';
}

if ( Avada()->settings->get( 'portfolio_equal_heights' ) && 'grid' === $portfolio_layout_setting ) {
	$portfolio_classes[] = 'fusion-portfolio-equal-heights';
}

// Get the correct ID of the archive.
$archive_id = get_queried_object_id();

$title      = true; // phpcs:ignore WordPress.WP.GlobalVariablesOverride
$categories = true;

// Get title and category status.
if ( 'no_text' !== $portfolio_text_layout ) {
	$title_display = Avada()->settings->get( 'portfolio_archive_title_display' );
	$title         = ( 'all' === $title_display || 'title' === $title_display ) ? true : false; // phpcs:ignore WordPress.WP.GlobalVariablesOverride
	$categories    = ( 'all' === $title_display || 'cats' === $title_display ) ? true : false;
}
?>

<div class="<?php echo esc_attr( implode( ' ', $portfolio_classes ) ); ?>">

	<?php
	/**
	 * Render category description if it is set.
	 */
	?>
	<?php if ( category_description() ) : ?>
		<div id="post-<?php echo intval( get_the_ID() ); ?>" <?php post_class( 'post' ); ?>>
			<div class="post-content">
				<?php echo category_description(); ?>
			</div>
		</div>
	<?php endif; ?>

	<div class="fusion-portfolio-wrapper" data-picturesize="<?php echo ( 'full' !== $portfolio_image_size ) ? 'fixed' : 'auto'; ?>" data-pages="<?php echo esc_attr( $wp_query->max_num_pages ); ?>">

		<?php if ( 'masonry' === $portfolio_layout_setting ) : ?>
		<article class="fusion-portfolio-post fusion-grid-sizer"></article>
		<?php endif; ?>
<?php/* @trevorsf added code here ... start */
        if ( $query->have_posts() ) :
/* @trevorsf added code here ... end */?>
		<?php while ( have_posts() ) : ?>
			<?php the_post(); ?>

			<?php if ( Avada()->settings->get( 'featured_image_placeholder' ) || has_post_thumbnail() ) : ?>
				<?php
				$element_orientation_class = '';
				$element_base_padding      = 0.8;
				$responsive_images_columns = $portfolio_columns_int;
				$masonry_attributes        = array();

				// Masonry layout, get the element orientation class.
				if ( 'masonry' === $portfolio_layout_setting ) {
					// Set image or placeholder and correct corresponding styling.
					if ( has_post_thumbnail() ) {
						$post_thumbnail_attachment = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
						$masonry_attribute_style   = $lazy_load ? '' : 'background-image:url(' . $post_thumbnail_attachment[0] . ');';

					} else {
						$masonry_attribute_style = 'background-color:#f6f6f6;';
					}

					// Get the correct image orientation class.
					$element_orientation_class = $fusion_library->images->get_element_orientation_class( get_post_thumbnail_id() );
					$element_base_padding      = $fusion_library->images->get_element_base_padding( $element_orientation_class );

					$masonry_column_offset = ' - ' . ( (int) $portfolio_column_spacing / 2 ) . 'px';
					if ( false !== strpos( $element_orientation_class, 'fusion-element-portrait' ) ) {
						$masonry_column_offset = '';
					}

					$masonry_column_spacing = ( (int) $portfolio_column_spacing ) . 'px';

					if ( 'no_text' !== $portfolio_text_layout && 'boxed' === $portfolio_text_layout &&
						class_exists( 'Fusion_Sanitize' ) && class_exists( 'Fusion_Color' ) &&
						'transparent' !== Fusion_Sanitize::color( $fusion_settings->get( 'timeline_color' ) ) &&
						0 !== Fusion_Color::new_color( $fusion_settings->get( 'timeline_color' ) )->alpha
					) {

						$masonry_column_offset = ' - ' . ( (int) $portfolio_column_spacing / 2 ) . 'px';
						if ( false !== strpos( $element_orientation_class, 'fusion-element-portrait' ) ) {
							$masonry_column_offset = ' + 4px';
						}

						$masonry_column_spacing = ( (int) $portfolio_column_spacing - 4 ) . 'px';
						if ( false !== strpos( $element_orientation_class, 'fusion-element-landscape' ) ) {
							$masonry_column_spacing = ( (int) $portfolio_column_spacing - 10 ) . 'px';
						}
					}

					// Calculate the correct size of the image wrapper container, based on orientation and column spacing.
					$masonry_attribute_style .= 'padding-top:calc((100% + ' . $masonry_column_spacing . ') * ' . $element_base_padding . $masonry_column_offset . ');';

					// Check if we have a landscape image, then it has to stretch over 2 cols.
					if ( '1' !== $portfolio_columns_int && 1 !== $portfolio_columns_int && false !== strpos( $element_orientation_class, 'fusion-element-landscape' ) ) {
						$responsive_images_columns = (int) $portfolio_columns_int / 2;
					}

					// Set the masonry attributes to use them in the first featured image function.
					$element_orientation_class = ' ' . $element_orientation_class;

					$masonry_attributes = array(
						'class' => 'fusion-masonry-element-container',
						'style' => $masonry_attribute_style,
					);

					if ( $lazy_load && isset( $post_thumbnail_attachment[0] ) ) {
						$masonry_attributes['data-bg'] = $post_thumbnail_attachment[0];
						$masonry_attributes['class']  .= ' lazyload';
					}
				}
				?>

				<article class="fusion-portfolio-post post-<?php echo esc_attr( $post->ID ); ?> <?php echo esc_attr( $column_spacing_class . $element_orientation_class ); ?>"<?php echo $column_spacing; // phpcs:ignore WordPress.Security ?>>

					<?php
					/**
					 * Open portfolio-item-wrapper for text layouts.
					 */
					?>
					<?php if ( 'no_text' !== $portfolio_text_layout || 'one' === $portfolio_columns ) : ?>
						<div class="fusion-portfolio-content-wrapper">test
					<?php endif; ?>

						<?php
						/**
						 * If no featured image is present,
						 * on one column layouts render the video set in page options.
						 */
						?>
						<?php if ( ! has_post_thumbnail() && fusion_get_page_option( 'video', $post->ID ) ) : ?>
							<?php
							/**
							 * For the portfolio one column layout we need a fixed max-width.
							 * For all other layouts get the calculated max-width from the image size.
							 */
							?>
							<?php $video_max_width = ( 'one' === $portfolio_columns && 'floated' === $portfolio_one_column_text_pos ) ? '540px' : $post_featured_image_size_dimensions['width']; ?>
							<div class="fusion-image-wrapper fusion-video" style="max-width:<?php echo esc_attr( $video_max_width ); ?>;">
								<?php echo fusion_get_page_option( 'video', $post->ID ); // phpcs:ignore WordPress.Security ?>
							</div>

							<?php
							/**
							 * On every other other layout render the featured image.
							 */
							?>
						<?php else : ?>
							<?php
							if ( 'full' === $portfolio_image_size && class_exists( 'Avada' ) && property_exists( Avada(), 'images' ) ) {
								Avada()->images->set_grid_image_meta(
									array(
										'layout'       => 'portfolio_full',
										'columns'      => $responsive_images_columns,
										'gutter_width' => $portfolio_column_spacing,
									)
								);
							}
							echo fusion_render_first_featured_image_markup( $post->ID, $portfolio_image_size, get_permalink( $post->ID ), true, false, false, 'default', 'default', '', '', 'yes', false, $masonry_attributes ); // phpcs:ignore WordPress.Security
							Avada()->images->set_grid_image_meta( array() );
							?>

						<?php endif; ?>

						<?php
						/**
						 * If we don't have a text layout then only render rich snippets.
						 */
						?>
						<?php if ( 'no_text' === $portfolio_text_layout ) : ?>
							<?php echo fusion_render_rich_snippets_for_pages(); // phpcs:ignore WordPress.Security ?>
							<?php
							/**
							 * If we have a text layout render its contents.
							 */
							?>
						<?php else : ?>
							<div class="fusion-portfolio-content">
								<?php
								/**
								 * Render the post title.
								 */
								?>
								<?php
								if ( $title ) {
									echo avada_render_post_title( $post->ID ); // phpcs:ignore WordPress.Security
								}
								?>
								<?php
								/**
								 * Render the post categories.
								 */
								?>
								<?php
								if ( $categories ) {
									echo '<div class="fusion-portfolio-meta">' . get_the_term_list( $post->ID, 'portfolio_category', '', ', ', '' ) . '</div>';
								}
								?>
								<?php echo fusion_render_rich_snippets_for_pages( false ); // phpcs:ignore WordPress.Security ?>
								<?php
								/**
								 * For boxed layouts add a content separator if there is a post content and either categories or title is used.
								 */
								?>
								<?php if ( 'masonry' !== $portfolio_layout_setting && 'boxed' === $portfolio_text_layout && '0' !== fusion_get_portfolio_excerpt_length( $post->ID ) && 'no_text' !== $portfolio_content_length && ( $title || $categories ) ) : ?>
									<?php
									$separator_styles_array = explode( '|', $fusion_settings->get( 'grid_separator_style_type' ) );
									$separator_styles       = '';

									foreach ( $separator_styles_array as $separator_style ) {
										$separator_styles .= ' sep-' . $separator_style;
									}

									$border_color = Fusion_Color::new_color( $fusion_settings->get( 'grid_separator_color' ) );
									if ( 0 === $border_color->alpha || 'transparent' === $fusion_settings->get( 'grid_separator_color' ) ) {
										$separator_styles .= ' sep-transparent';
									}
									?>
									<div class="fusion-content-sep<?php echo esc_attr( $separator_styles ); ?>"></div>
								<?php endif; ?>

								<div class="fusion-post-content">
									<?php
									/**
									 * The avada_portfolio_post_content hook.
									 *
									 * @hooked avada_get_portfolio_content - 10 (outputs the post content).
									 */
									do_action( 'avada_portfolio_post_content', $post->ID );
									?>

									<?php
									/**
									 * On one column layouts render the "Learn More" and "View Project" buttons.
									 */
									?>
									<?php if ( 'one' === $portfolio_columns && 'grid' === $portfolio_layout_setting ) : ?>
										<?php $button_span_class = ( 'yes' === $fusion_settings->get( 'button_span' ) ) ? ' fusion-portfolio-buttons-full' : ''; ?>
										<div class="fusion-portfolio-buttons<?php echo esc_attr( $button_span_class ); ?>">
											<?php
											/**
											 * Render "Learn More" button.
											 */
											?>
											<a href="<?php echo esc_url_raw( get_permalink( $post->ID ) ); ?>" class="fusion-button fusion-button-small fusion-button-default fusion-button-<?php echo esc_attr( strtolower( Avada()->settings->get( 'button_shape' ) ) ); ?> fusion-button-<?php echo esc_attr( strtolower( Avada()->settings->get( 'button_type' ) ) ); ?>">
												<?php esc_html_e( 'Learn More', 'fusion-core' ); ?>
											</a>
											<?php
											/**
											 * Render the "View Project" button only if a project url was set.
											 */
											?>
											<?php if ( fusion_get_page_option( 'project_url', $post->ID ) ) : ?>
												<a href="<?php echo esc_url_raw( fusion_get_page_option( 'project_url', $post->ID ) ); ?>" class="fusion-button fusion-button-small fusion-button-default fusion-button-<?php echo esc_attr( strtolower( Avada()->settings->get( 'button_shape' ) ) ); ?> fusion-button-<?php echo esc_attr( strtolower( Avada()->settings->get( 'button_type' ) ) ); ?>">
													<?php esc_html_e( ' View Project', 'fusion-core' ); ?>
												</a>
											<?php endif; ?>
										</div>
									<?php endif; ?>

								</div><!-- end post-content -->

							</div><!-- end portfolio-content -->

						<?php endif; // End template check. ?>

					<?php
					/**
					 * Close portfolio-item-wrapper for text layouts.
					 */
					?>
					<?php if ( 'no_text' !== $portfolio_text_layout || 'one' === $portfolio_columns ) : ?>
						</div>

						<?php
						/**
						 * On unboxed one column layouts render a separator at the bottom of the post.
						 */
						?>
						<?php if ( 'one' === $portfolio_columns && 'boxed' !== $portfolio_text_layout && 'grid' === $portfolio_layout_setting ) : ?>
							<div class="fusion-clearfix"></div>
							<div class="fusion-separator sep-double"></div>
						<?php endif; ?>
					<?php endif; ?>

				</article><!-- end portfolio-post -->

			<?php endif; // Placeholders or featured image. ?>
		<?php endwhile; ?>
<?php/* @trevorsf added code here ... start */
        else :
?>
        <div class="no-results">No results found</div>
<?php   endif; /* @trevorsf added code here ... end */?>
	</div><!-- end portfolio-wrapper -->

	<?php
	/**
	 * Render the pagination.
	 */
	?>
	<?php echo fusion_pagination( '', Avada()->settings->get( 'pagination_range' ) ); // phpcs:ignore WordPress.Security ?>
	<?php
	/**
	 * If infinite scroll with "load more" button is used.
	 */
	?>
	<?php if ( 'load_more_button' === $portfolio_pagination_type && 1 < esc_attr( $wp_query->max_num_pages ) ) : ?>
		<div class="fusion-load-more-button fusion-portfolio-button fusion-clearfix">
			<?php echo esc_attr( apply_filters( 'avada_load_more_posts_name', esc_html__( 'Load More Posts', 'fusion-core' ) ) ); ?>
		</div>
	<?php endif; ?>

	<?php wp_reset_postdata(); ?>
</div><!-- end fusion-portfolio -->

You can see I added two blocks:

https://www.screencast.com/t/wG50IHUFw2

and:

https://www.screencast.com/t/rPRgseXm

I cannot see the name of the query array in the file. I have assumed that it is the normal $query, as you can see in my first code block:

if ( $query->have_posts() ) :

But, looking further at the code, there is this in the file you sent at the top:

global $wp_query, $fusion_library;

So that makes me think it is $wp_query

so my code should have been:

if ( $wp_query->have_posts() ) :

I hope that makes sense. The code is simply adding a check to see if there are any posts. If there are it runs the code you already have, or else it outputs that small no results message.

[Trevor]

You need to separate out groups, branches or parent/child tags into separate custom taxonomies. In the case of your form, this means you plan to use tags three times, so you really need a new taxonomy for the children (Capacity, Region and Venue Style).

In general, you can use a particular Taxonomy, such as Category, (or Tags, each Taxonomy and each Custom Field) only once in the form. This post tries to explain this a bit better (you can use a plugin to switch category terms from category to any new taxonomy that you make, so it is not so hard to do). It is a really awful preachy lecture I wrote:

https://support.searchandfilter.com/forums/topic/multiple-categories-combination/#post-55166

Sorry about the tone, but the message is right and it links to good plugins (except taxonomy switcher I think).

Taxonomy switcher is a ‘use once and remove’ type of plugin, and it uses ‘hidden’ features in WordPress that have not changed for about 2 years.

Let us say that you have Categories (as WordPress calls them) on some posts, and some of them are fruit types. For example, Apple. Now you decide to have a separate taxonomy called Fruit Type. You may have hundreds of posts with those fruit types already in Categories, and don’t want to retype them all again. Let us say the the Apple ‘term’ has an ID # of 234 (they all have ID numbers). You tell Taxonomy Switcher to move the term 234 from Categories to Fruit Types, and it does all the work for you. You can do a whole bunch of IDs at once, all you need is their ID numbers.

IF you went in to one of our forms in admin, to the Tags, Categories & Taxonomies settings tab, find the line for Categories (in this case) and use the search to ‘add’ all the ones you want to move, then you will see in the settings box all the ID numbers you need to be able to do this. So, cut them from that box and paste them in to Taxonomy Switcher.

Be wary if you have child terms though (those which have a parent), as the parent may have to be moved also, or you may need to re-define the children as parents instead before you move them.

[Anonymous]

I’ve replaced the first section as instructed and changed the Ajax container, but still no luck.

<?php
/**
 * Created by PhpStorm.
 * User: jason
 * Date: 9/13/19
 * Time: 9:48 AM
 * Template Name: Job Board
 */
get_header(); ?>
    <main id="job-board">
        <section class="job-board-search job-search-menu background-image" style="background-image: url(<?php the_field('search_form_background_image', 'option'); ?>);">
            <div class="site-container narrow">
                <fieldset class="form big">
					<?php echo do_shortcode('[searchandfilter id="218"]'); ?>
                </fieldset>
            </div>
        </section>
        <section class="main" id="jobs">
            <div class="site-container">

                <div class="ad top"></div>
                <div class="job-board-filters-wrapper">
                    <div id="job-board-filters" class="job-board-filters filter">
                        <h3 class="filters-heading">Job Filters</h3>
                        <a id="job-filter-toggle">
                            <svg viewBox="0 0 24.76 24.76">
                                <path class="cls-1" d="M10,.5a.5.5,0,0,1,.5-.5h3.87a.5.5,0,0,1,.5.5V10h9.44a.5.5,0,0,1,.5.5v3.87a.5.5,0,0,1-.5.5H14.82v9.44a.5.5,0,0,1-.5.5H10.45a.5.5,0,0,1-.5-.5V14.82H.5a.5.5,0,0,1-.5-.5V10.45A.5.5,0,0,1,.5,10H10Z"/>
                            </svg>
                        </a>
                        <div class="job-board-filters-inner">
							<?php echo do_shortcode('[searchandfilter id="220"]'); ?>
                        </div>
                    </div>
                    <div class="job-help">
                        <h3 class="filters-heading">Need Help?</h3>
                        <a id="job-help-toggle">
                            <svg viewBox="0 0 24.76 24.76">
                                <path class="cls-1" d="M10,.5a.5.5,0,0,1,.5-.5h3.87a.5.5,0,0,1,.5.5V10h9.44a.5.5,0,0,1,.5.5v3.87a.5.5,0,0,1-.5.5H14.82v9.44a.5.5,0,0,1-.5.5H10.45a.5.5,0,0,1-.5-.5V14.82H.5a.5.5,0,0,1-.5-.5V10.45A.5.5,0,0,1,.5,10H10Z"/>
                            </svg>
                        </a>
                        <div class="job-help-inner">
                            <ul>
                                <li><a href="#">How to Post a Job </a></li>
                                <li><a href="#">Help for Job Seekers </a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="ad left"></div>

                </div>

				<?php
				$args['search_filter_id'] = 220;
				$query = new WP_Query($args);
				?>
                <div class="job-board-results-wrapper">
                    <div class="mobile-table">
						<?php
						if($query-> have_posts() ): ?>
                        <table class="job-board-results grid">
                            <thead>
                            <tr>
                                <th class="title">Title & Organization</th>
                                <th class="function">Job Function</th>
                                <th class="type">Type</th>
                                <th class="date">Date Posted </th>
                            </tr>
                            </thead>
                            <tbody>

                                <?php while($query->have_posts() ): ?>
                                    <?php $query->the_post(); ?>
                                    <?php
                                        $date = get_the_date('M j, Y');
                                        $name = get_the_company_name();
                                        $serviceAreas = get_the_terms( get_the_ID(), 'service_area' );
                                        $jobFunctions = get_the_terms( get_the_ID(), 'job_function' );
                                        $jobType = get_the_terms( get_the_ID(), 'job_type' );
                                    ?>

                                    <tr class="single-job-result">
                                        <td>
                                            <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
                                            <p><?php echo $name; ?></p></td>
                                        <td>
                                            <?php if($jobFunctions): ?>
                                            <ul>
                                                <?php foreach($jobFunctions as $jobFunction): ?>
                                                <li><?php echo $jobFunction->name; ?></li>
                                                <?php endforeach; ?>
                                            </ul>
                                            <?php endif; ?>
                                        </td>
                                        <td>
                                            <?php echo $jobType[0]->name; ?>
                                        </td>
                                        <td>
                                            <?php echo $date; ?>
                                        </td>
                                    </tr>

                                    <?php endwhile;?>
                                <?php else: ?>
                                   <div data-search-filter-action='infinite-scroll-end'>
                                <h4>No results found</h4>
                                   </div>
                                <?php endif;
                                wp_reset_postdata();
                            ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </main>
<?php get_footer();

[Trevor]

I can see that you have echoed both forms on the page. This may cause issues (but not the one you describe I think).

I suspect that the problem is the HTML structure. I think it should start like this:

<?php
/**
 * Created by PhpStorm.
 * User: jason
 * Date: 9/13/19
 * Time: 9:48 AM
 * Template Name: Job Board
 */
get_header(); ?>
<main id="job-board">
	<section id="job-board-search" class="job-search-menu background-image" style="background-image: url(<?php the_field('search_form_background_image'); ?>);">
		<div class="site-container narrow">
			<fieldset class="form big">
				<?php echo do_shortcode('[searchandfilter id="218"]'); ?>
			</fieldset>
		</div>
	</section>
	<section class="main" id="jobs">
		<div class="site-container">

			<div class="ad top"></div>
            <div class="job-board-filters-wrapper">
                <div id="job-board-filters" class="job-board-filters filter">
                    <h3 class="filters-heading">Job Filters</h3>
                    <a id="job-filter-toggle">
                        <svg viewBox="0 0 24.76 24.76">
                            <path class="cls-1" d="M10,.5a.5.5,0,0,1,.5-.5h3.87a.5.5,0,0,1,.5.5V10h9.44a.5.5,0,0,1,.5.5v3.87a.5.5,0,0,1-.5.5H14.82v9.44a.5.5,0,0,1-.5.5H10.45a.5.5,0,0,1-.5-.5V14.82H.5a.5.5,0,0,1-.5-.5V10.45A.5.5,0,0,1,.5,10H10Z"/>
                        </svg>
                    </a>
                    <div class="job-board-filters-inner">
                        <?php echo do_shortcode('[searchandfilter id="220"]'); ?>
                    </div>
                </div>
                <div class="job-help">
                    <h3 class="filters-heading">Need Help?</h3>
                    <a id="job-help-toggle">
                        <svg viewBox="0 0 24.76 24.76">
                            <path class="cls-1" d="M10,.5a.5.5,0,0,1,.5-.5h3.87a.5.5,0,0,1,.5.5V10h9.44a.5.5,0,0,1,.5.5v3.87a.5.5,0,0,1-.5.5H14.82v9.44a.5.5,0,0,1-.5.5H10.45a.5.5,0,0,1-.5-.5V14.82H.5a.5.5,0,0,1-.5-.5V10.45A.5.5,0,0,1,.5,10H10Z"/>
                        </svg>
                    </a>
                    <div class="job-help-inner">
                        <ul>
                            <li><a href="#">How to Post a Job </a></li>
                            <li><a href="#">Help for Job Seekers </a></li>
                        </ul>
                    </div>
                </div>
                <div class="ad left"></div>

            </div>

                        <?php
                            $args['search_filter_id'] = 220;
                            $query = new WP_Query($args);
?>
            <div class="job-board-results-wrapper">
                <div class="mobile-table">
<?php
                            if($query-> have_posts() ): ?>
                    <table class="job-board-results grid">
                        <thead>
                            <tr>
                                <th class="title">Title & Organization</th>
                                <th class="function">Job Function</th>
                                <th class="type">Type</th>
                                <th class="date">Date Posted </th>
                            </tr>
                        </thead>
                        <tbody>

                                <?php while($query->have_posts() ): ?>

BUT, the ending parts to table and the job-board-results div might then need to be moved, I am not sure. I think the Ajax Container should be .job-board-results-wrapper

[Anonymous]

I echoed the shortcode. Full template file below for reference. (Thanks for your responses, by the way.)

<?php
/**
 * Created by PhpStorm.
 * User: jason
 * Date: 9/13/19
 * Time: 9:48 AM
 * Template Name: Job Board
 */
get_header(); ?>
<main id="job-board">
	<section id="job-board-search" class="job-search-menu background-image" style="background-image: url(<?php the_field('search_form_background_image'); ?>);">
		<div class="site-container narrow">
			<fieldset class="form big">
				<?php echo do_shortcode('[searchandfilter id="218"]'); ?>
			</fieldset>
		</div>
	</section>
	<section class="main" id="jobs">
		<div class="site-container">

			<div class="ad top"></div>
            <div class="job-board-filters-wrapper">
                <div id="job-board-filters" class="job-board-filters filter">
                    <h3 class="filters-heading">Job Filters</h3>
                    <a id="job-filter-toggle">
                        <svg viewBox="0 0 24.76 24.76">
                            <path class="cls-1" d="M10,.5a.5.5,0,0,1,.5-.5h3.87a.5.5,0,0,1,.5.5V10h9.44a.5.5,0,0,1,.5.5v3.87a.5.5,0,0,1-.5.5H14.82v9.44a.5.5,0,0,1-.5.5H10.45a.5.5,0,0,1-.5-.5V14.82H.5a.5.5,0,0,1-.5-.5V10.45A.5.5,0,0,1,.5,10H10Z"/>
                        </svg>
                    </a>
                    <div class="job-board-filters-inner">
                        <?php echo do_shortcode('[searchandfilter id="220"]'); ?>
                    </div>
                </div>
                <div class="job-help">
                    <h3 class="filters-heading">Need Help?</h3>
                    <a id="job-help-toggle">
                        <svg viewBox="0 0 24.76 24.76">
                            <path class="cls-1" d="M10,.5a.5.5,0,0,1,.5-.5h3.87a.5.5,0,0,1,.5.5V10h9.44a.5.5,0,0,1,.5.5v3.87a.5.5,0,0,1-.5.5H14.82v9.44a.5.5,0,0,1-.5.5H10.45a.5.5,0,0,1-.5-.5V14.82H.5a.5.5,0,0,1-.5-.5V10.45A.5.5,0,0,1,.5,10H10Z"/>
                        </svg>
                    </a>
                    <div class="job-help-inner">
                        <ul>
                            <li><a href="#">How to Post a Job </a></li>
                            <li><a href="#">Help for Job Seekers </a></li>
                        </ul>
                    </div>
                </div>
                <div class="ad left"></div>

            </div>
            <div class="job-board-results-wrapper">
                <div class="mobile-table">
                    <table class="job-board-results grid">
                        <thead>
                            <tr>
                                <th class="title">Title & Organization</th>
                                <th class="function">Job Function</th>
                                <th class="type">Type</th>
                                <th class="date">Date Posted </th>
                            </tr>
                        </thead>
                        <tbody>

                        <?php
                            $args['search_filter_id'] = 220;
                            $query = new WP_Query($args);

                            if($query-> have_posts() ): ?>

                                <?php while($query->have_posts() ): ?>

                                    <?php $query->the_post(); ?>
                                    <?php
                                        $date = get_the_date('M j, Y');
                                        $name = get_the_company_name();
                                        $serviceAreas = get_the_terms( get_the_ID(), 'service_area' );
                                        $jobFunctions = get_the_terms( get_the_ID(), 'job_function' );
                                        $jobType = get_the_terms( get_the_ID(), 'job_type' );
                                    ?>
                                    <tr class="single-job-result">
                                        <td>
                                            <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
                                            <p><?php echo $name; ?></p></td>
                                        <td>
                                            <?php if($jobFunctions): ?>
                                            <ul>
                                                <?php foreach($jobFunctions as $jobFunction):

                                                    ?>
                                                    <li><?php echo $jobFunction->name; ?></li>
                                                <?php endforeach; ?>
                                            </ul>
                                            <?php endif; ?>
                                            </td>
                                        <td><?php echo $jobType[0]->name; ?></td>
                                        <td><?php echo $date; ?></td>
                                    </tr>

                                <?php endwhile;?>
                            <?php else: ?>
                               <div data-search-filter-action='infinite-scroll-end'>
                            <h4>No results found</h4>
                               </div>
                            <?php endif;
                                wp_reset_postdata();
                        ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

	</section>

</main>
<?php get_footer();