Sort on click

Anonymous

#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

#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?

Anonymous

#249109

This reply has been marked as private.

Anonymous

#249132

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

Trevor

#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.

Anonymous

#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

#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.

Anonymous

#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

#249330

This reply has been marked as private.

Trevor

#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