Search Results for 'horizontal'

[Anonymous]

Hey!

How to center align the search form? I want it to be aligned right over the display output. But for some reasons everything aligns to the left! Tried basically everything to correct this. Same applies with the responsive layout – it just looks weird! Would be nice to align everything under each other with full auto width.

The link is: http://www.erlinghoi-nielsen.dk/beta2020/find-bil/

[Anonymous]

@shelby Thank you very much for that. It did not quite work – that CSS shows the search form horizontally, not the results. But it did steer me in the right direction:

.SearchResult {
display: inline-block;
vertical-align: top;

}

This CSS worked for me. Thank you so much!

[Anonymous]

Hi Vernita,

I just happened to be looking through other peoples questions to try to solve a problem of mine and I came across this. If you add the following CSS it should make the form display horizontal rather than vertical.

.searchandfilter > ul > li {
	display: inline-block;
	vertical-align: top;
	padding: 0 20px;
}

[Anonymous]

Hi Trevor,

Thank you so much!!! Yes, that is working fine now. It was doing some funky thing with two buttons showing sometimes but I think it was a caching problem because it seems to have fixed itself.

I also tried to display the results next to each other instead of one long row. I even tried a Themer layout displaying posts differently but I could not figure either out. If you can help me display them in a horizontal row I would really appreciate it. Any advice, please?

Many Thanks
Vernita

[Anonymous]

How can I best customize the search layout to be horizontal like whats on this page? http://scottent.com/projects

I need it to look exactly like that

[Trevor]

The Custom CSS shown in this documentation should serve to make the form’s field display horizontally:

https://searchandfilter.com/documentation/getting-started/display-search-form/#making-your-search-form-horizontal

In the main, our form is unstyled, so requires some CSS to style it. This will vary according to the users themes, so generic CSS is difficult to give.

[Anonymous]

Yes, I have done that. It’s the first page in the Pages section, it has no name. It is showing on the website, so apparantly the improves include page plugin works! Hopefully this helps in making the filter horizontal :D.

[Trevor]

I think this may be what you want:

https://searchandfilter.com/documentation/getting-started/display-search-form/#making-your-search-form-horizontal

[Anonymous]

Hi Trevor,

A few weeks ago we talked about the filter on our website, it wasn’t live then. But since today it is :D.

Could you please look into the following: when using the plugin, the results are not displayed. Also, I would like the filter to be horizontal and looking good on all screensizes.

Thanks a lot for checkin it out!

I’ll give you the logins in a reply :).

Thanks!

[Anonymous]

Hi,

I am using Ajax filtering with taxonomy as radio buttons and Slick slider (https://kenwheeler.github.io/slick/) to support better horizontal scrolling on mobile devices.

The problem is that when selecting item, right group of items is not shown. i think slick and ajax request go into conflict.
Also when item is selected, slick stops working and reinitiating it after ajax event is completed does not work.

I found a similar problem here: https://support.searchandfilter.com/forums/topic/ajax-messing-up-slick-js-script/page/2/
Unfortunately solution there does not work for us.

JS:

$.fn.slicknav = function() {
  $('.product-categories form > ul > li > ul').slick({
    slidesToShow: 5,
    centerMode: false,
    arrows: false,
    dots: false,
    infinite: false,
    variableWidth: true,
    initialSlide: 1,
    responsive: [
      {
        breakpoint: 1025,
        settings: {
          dots: false,
          arrows: false,
          slidesToShow: 3,
          centerMode: false,
          centerPadding: '0',
        }
      },
      {
        breakpoint: 640,
        settings: {
          dots: false,
          arrows: false,
          slidesToShow: 1,
          centerMode: true,
          centerPadding: '0',
        }
      }
    ]
  });
};
$(document).ready(function($){
  $('.product-categories form > ul > li > ul').slicknav();
});
$(document).on('sf:init, sf:ajaxfinish', '.searchandfilter', function(){
  $('.product-categories form > ul > li > ul').slicknav();
});