Results Box Width & Margin

[ColgenParticipant]

Hi!

I cannot seem, for the life of me, find the results box width & margin. My goal is to have the results box width the same width as the search box (as the max width) and move the results box slightly lower from the search box. The first image shows you the results being way off screen – this one also hides the filters and shows all the results without a letter or a keyword (how do I stop it from showing results without any input?) as seen in the image. 2nd shows you how I want it done, except move the results box slightly lower.

Right now, the results show way outside of the screen and the search box on certain letter, or keywords. How do I fix this?

FYI – the website is password protected for the time being – I put the username & password to see the website live in the private box. If you really need access, let me know.

Thank you.

[ColgenParticipant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

Hi,

Thank you for all the details, it helps us a lot.

Okay, so for some reason, even thoug the results width should always follow the box width there, it keeps resetting to 10 000px width. I tried to look through all the parent nodes, as well as the search elements, to see what is pushing this extremely high width, but there is nothing suspicious there. My only guess is, that for some reason the parent element is not properly considered as parent, and setting the default 100% width goes into infinity.
I have never seen an issue like this before, so I am only guessing.

I think I might have a solution though, or at least it should make a difference. Instead of the current search shortcode, can you please try replacing it with this:

[wd_asp elements='search,results,settings' ratio='100%,100%,100%' id=1]

This should force an additional element as parent to the results box, and hopefully limit it’s width. Also, use this custom CSS along with it:

.asp_r_1 {
    max-width: 750px;
}

To add a top margin, try this one:

.asp_r_1 {
    margin-top: 12px !important;
}

2. To disable empty searches, you can increase the minimum character input to trigger the live search here: https://i.imgur.com/RSleeCF.png

Please let me know if anything changes.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[ColgenParticipant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

Thank you very much for the details, I may have found a solution.

I think this is something to do with the animations stacking, or something very unusual, I am not able to see anything strange, the width simply blows to infinity for no apparent reason.

The only possible solution I think, is to adjust it via a script, during window resize events. I have constructed a custom script for that. Please add this custom code to the functions.php in your theme/child theme directory. Before editing, please make sure to have a full site back-up just in case! Also, make sure to clear all layers of cache (page, CDN, browser etc..) to make sure it’s present on the page output.

add_action('wp_footer', 'asp_custom_scrpt');
function asp_custom_scrpt() {
 ?>
 <script>
 jQuery(function($) {
  $(window).on('resize', function(){
    var t;
    clearTimeout(t);
    t = setTimeout(function(){
      $('.asp_r').each(function(i,o){
        var $this = $(this);
        $this.css('maxWidth', $('.asp_m_' + $this.data('id')).outerWidth());
        if ( $this.closest('.asp_shortcodes_container').length > 0 ) {
          $this.closest('.asp_shortcodes_container')
            .css('maxWidth', $('.asp_m_' + $this.data('id')).outerWidth());
        }
      });
    }, 300);
  });
  $(window).trigger('resize');  
 });
 </script>
 <?php
}

This should resolve the problem.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[ColgenParticipant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts