Search Results for 'horizontal'

[Trevor]

Apologies for the delay in responding. Your last reply arrived after we closed our support for the weekend (our normal support hours are Monday – Friday 10am – 5pm GMT) and Monday was a national holiday in the UK.

You appear to have 3 different forms on the page. ID numbers 1901, 1904, 1905 and 1906.

Why do you not have these all in one form? As it is, in separate forms, it will not work.

Is it because you want the fields horizontal? In which case Custom CSS like this would perhaps start to make this for you:

.searchandfilter > ul > li {
  display: inline-block;
  margin-right: 20px;
  float: left;
}
.searchandfilter > ul > li:last-child {
  margin-right: 0;
}
.search-filter-results {clear: both;}

Also, I see that you are using Visual Composer. We have a beta addon for Visual Composer. You can download and install this free addon plugin:

https://www.dropbox.com/s/t4gnvhr8mj7e52d/search-filter-pro-vc-beta-2.zip?dl=0

Then, in the Search & Filter form settings, for Display Results method, select Visual Composer Grid.

In the page, use Visual Composer to design the page. You will find a new element for our Search Form (it has a blue icon).

For the results, select one of the Visual Composer grids, such as the (orange icon) Post Grid.

In the settings for that, as the Data Source select Search & Filter

Then select the form in the next option box. Then select grid type (posts per row) and Pagination.

In the design part, either select a pre-defined grid, or design/build one of your own with the grid builder.

[Anonymous]

Hi there!

Thanks so much for your patience, I think I have everything figured out for the most part. I was able to use your code to create the check boxes horizontal (thank you). I updated to use the shortcode instead of archive, which fixed the redirect issue.

However, now on the search form itself I am having two issues:

1 – it displays the posts that are included without clicking any checkboxes.

2 – When I do click the checkboxes, it’s only showing one post when it should be showing 2-3 based on the checkboxes I am selecting.

If we can check these two things to work, we will be good to go! Apologies as I am no coding wiz, and you help is more than appreciated 🙂

[Trevor]

Is it just the checkboxes that need to be horizontal? Instead, then, this might work:

.searchandfilter ul > li > ul:not(.children) {
  padding-left: 0;
}
.searchandfilter > ul > li > ul > li {
  display: inline-block;
}
.searchandfilter  > ul > li > ul > li .sf-label-checkbox {
  margin-right: 20px;
}

[Anonymous]

Hi there!

Ok, so I got the basic functionalities to work (woo!). Now I just need some help with a few things please!

1 – When I conduct a search, it redirects to the homepage. The search results display underneath the home slider and the 3 call to action boxes. Ideally, I would like for the results to display on the same page, or a new page (without the slider and CTA boxes).

2 – The search function works, however it searches automatically after selecting one box. Before results are filtered, users should be able to check as many boxes as they need and then bring up relevant results.

3 – I would like to have 3 different search headings. 1 – Age Range. 2 – Activity Type. 3 – Materials. currently, I have the age and activity set into categories and the materials into tags. I would prefer a way to seperate all 3 search criteria easily.

4 – Is there a way to have this display horizontally instead of vertically?

I appreciate your help! The url for the site is http://www.sicilysheartandhome.com/search

[Anonymous]

Hi,

I would like my search modules to appear horizontally on the Woocommerce page as in this demo you have for the basic software – http://www.designsandcode.com/wp-content/uploads/2013/09/screen21.png

Is that possible and how do I go about it please?

Thanks,

Rory

[Trevor]

The answer to the Masonry question is rather dependent on your theme (Tesseract, yes?). Are you using Beaver Builder to make the grid and does that use Masonry?

To make the filters go horizontal, you would need to use Custom CSS, like this maybe?

.searchandfilter > ul > li {
  display: inline-block;
  margin-right: 20px;
  float: left;
}
.searchandfilter > ul > li:last-child {
  margin-right: 0;
}
.search-filter-results {clear: both;}

[Anonymous]

Is it possible to have the filters displaying horizontally and have a masonry grid layout for the search results using shortcodes?

Many thanks for your help on this

[Trevor]

You would need to use Custom CSS to achieve that, by using CSS like float and display (inline-block). There are many examples on this forum, if you search for them (look for horizontal).

If you have a form as it is (on a link/URL please), and then an image mockup of what you want, I can probably help.

[Trevor]

Can you add this to your Custom CSS:

.meta-slider.noUi-target.noUi-rtl.noUi-horizontal.noUi-background {
direction: ltr !important;
}

[Anonymous]

Hi, thank you for this help – it got me started in the right direction. Here is the code snippet that finally worked:

<?php
  if ( has_post_thumbnail() ) { ?>
    <span class="responsive"><a href="<?php echo get_post_meta($query->post->ID,'artistpage',true); ?>">
<?php the_post_thumbnail("small");?></a></span>
  <?php	} ?>	

I don’t really understand the span issue, but this worked for me.

I have a follow-up question, related to the horizontal grid display. I am willing to ask again in another topic, if you prefer – please let me know:

I’d rather display 4 posts in each row, instead of 3 in a row with the fourth row empty. I have tried modifying the numbers and editing other code, but the result isn’t correct. How can I create a grid display with 4 columns, each containing search results?