Support Forums

The forums are closed and will be removed when we launch our new site.

Looking for support? You can access the support system via your account.

Forums › Forums › Search & Filter Pro › Sort on click

Tagged: ,

Viewing 10 posts - 1 through 10 (of 16 total)
1 2
  • Elena Politi
    (Private)  June 17, 2020 at 9:00 am #249057

    Hi I am using Enfold as a theme and I succeeded to add a S&F in my page wher all posts are displayed. Everything works fine. I need 3 search/sort actions: 2 of them filter via ajax the post by two custom fields. The third should simply sort posts in ASC order by title. If I add the “sort” field in my S&F, I have asked to add the options and a label. However, since the option is just one, I would like to have on the frontpage just the writing “by title”: if you click on the word it automatically sorts by title in ASC order (without a dropdown or checkbox). Is that possible?

    Trevor Moderator
    (Private)  June 17, 2020 at 12:36 pm #249107

    What is the default sort order? You may need to set the field to a Radio Button type and have two options: Default and Title.

    I may be able to make some CSS to then show it as you want. I may need to see the search page set up as I suggest.

    If only one option shows, how would the user know if it was ON or OFF? Maybe a background color? Maybe a toggle switch of some sort?

    Elena Politi
    (Private)  June 17, 2020 at 12:47 pm #249109
    This reply has been marked as private.
    Elena Politi
    (Private)  June 17, 2020 at 2:17 pm #249132

    And could you please tell me how can I style via css this element?

    Trevor Moderator
    (Private)  June 17, 2020 at 4:43 pm #249166

    Ah, I see, looking at the form, you have two sort order fields. This you cannot do, you can have only one. This may change in V3, but that may be more than a month away yet.

    Elena Politi
    (Private)  June 17, 2020 at 4:45 pm #249170

    Understood thanks. However can you suggest me how to style the container of the options listed? It has a border-radius which I don’t like and the font is different to the one given to the select. I tried different solutions but I didn’t succed to change it.

    Thanks

    Trevor Moderator
    (Private)  June 17, 2020 at 5:10 pm #249197

    Can you let me know what CSS you tried already?

    Please note that we are now closed for the day as it is late afternoon here in the UK, so my next reply may not be until tomorrow.

    Elena Politi
    (Private)  June 18, 2020 at 8:16 am #249270

    Hi Trevor, thanks very much. The example you can see online has the following CSS

    /*============================================================================================*/
/*SEARCH AND FILTER COUSTOM FORM AND WIDGET */
/* Style for the basic form and as it appears in the widget */
/*============================================================================================*/

form#search-filter-form-243.searchandfilter {
  margin-top:0px;
}
#top select {
  font-family:'AvenirNextCondensedRegular', sans-serif;
  padding-top:0px;
}
a.search-filter-reset {
    font-family:'AvenirNextCondensedRegular', sans-serif;
}
#search-filter-form-243 .searchandfilter label {
  font-size: 23px;
}

.searchandfilter ul li:first-child {
  padding-top:0px;
}
.searchandfilter ul li.sf-field-reset {
  padding-top:18px;
}
.searchandfilter a.search-filter-reset {
  margin-left:9px!important;
}
#top .entry-content-wrapper select {
 background:none; 
 border-radius: 0px;
}
#top #search-filter-form-243 select {
  border: none;
  background-color: transparent!important;
  margin-bottom: 5px!important;
  padding-left:0px!important;

}
#top select {
  font: 1em 'AvenirNextCondensedRegular', sans-serif!important;
}

@media only screen and (max-width: 767px) {
  .searchandfilter ul li {
    display: inline;
  }
  .widget #search-filter-form-243  li{
  font-size: 18px!important;
  }
 
  .searchandfilter select.sf-input-select {
    min-width:120px;
  }

}

    I don’t find the way to take off the border-radius from the options container (I mean when you click on a select the dropdown container has a border with a radius which I don’t want). Also the font inside this container is not the one I chose (AvenirNextCondensedRegular) but it’s an Helvetica. There is no way to change it. Can you help me? Thanks!

    For the rest, I will wait for V3.

    Trevor Moderator
    (Private)  June 18, 2020 at 11:59 am #249330
    This reply has been marked as private.
    Trevor Moderator
    (Private)  June 18, 2020 at 12:09 pm #249334

    Ah. Now I see. That style is applied by your device and browser to all form select boxes. It is not done with CSS.

    The only way to take control of ‘select’ elements is to use a JavaScript plugin library to replace them. For WordPress, the best choice is to use Select2. See this post:

    https://support.searchandfilter.com/forums/topic/configure-harvesthq-in-elementor-pro/#post-238775

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 16 total)
1 2

The topic ‘Sort on click’ is closed to new replies.