Stop layout from changing when: ‘Update the Search Form on user interaction’

Anonymous

#233768

I would like to use the ‘Auto count’ with ‘Update the Search Form on user interaction’ enabled. It updates all items correctly but changes the layout of the form. I want the form shown the same as it is before selecting an item from the dropdown. This is the (not finished yet) site: https://yourvalleyvisit.es/ the search form is placed on the homepage.
Since I don’t have php experience I have been trying to achieve this in the layout and search-filter CSS but can’t figure it out.
I hope that someone can help me out. Thanks heaps!

Trevor

#233779

On the General settings tab, try disabling Auto Submit, if it is still enabled?

Anonymous

#233784

Thanks for your quick reply. Unfortunately that is not the solution. I also tried with Auto Submit enabled but that’s not what I am looking for

Trevor

#233790

Ah, I think I see the problem (I think we can fix it). You are applying/adding/changing HTML parts of the form when the page loads? That code appears to be using JavaScript. Was that written by you or a third party?

Anonymous

#233837

I am sorry I don’t know so that could well be a third party action. Can’t recall or find anything in the files myself

Trevor

#233861

I found where your theme is adding this. Your theme is adding this in part of a custom script file:

$("select").each(function(){
  if($(this).css('display') != 'none') {
    $(this).wrap( '<div class="selection-box"></div>' );
  }
});

Does your theme allow you to add a script to the page?

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxformstart", ".searchandfilter", function(){
    $(".searchandfilter select").each(function(){
      if($(this).css('display') != 'none') {
        $(this).wrap( '<div class="selection-box"></div>' );
      }
    });
}(jQuery));</script>

I am not sure that is correct.

A word of caution. This will add back in the styling, but the select box widths may well change to the content in the changing, so you may have to set up some min-width CSS rules.

Anonymous

#233876

I have added it below the script that you have found. In theme/framework/js/custom.js. Is that what I should’ve done? The layout doesn’t change anymore after selecting something so that’s great. Only now it has got the layout that I tried to get rid of (the one it used to change to) and so do my other search forms.
You’re obviously on to something.
I hope that you have a suggestion for fixing that layout situation, then it’s perfect!

Trevor

#233878

I am not sure that is a good place to add it, as those scripts trigger on document load. Or was it on completely new lines after the end of the file? If it was, it should be without the script tags?

[Author]

Posts