Support » Plugin: FiboSearch - Ajax Search for WooCommerce » Results wider than the search field

  • Resolved stefansic

    (@stefansic)


    Is it possible to have a result list (.dgwt-wcas-suggestion) that is wider than the search field itself?
    I tried it with css but failed.

    Best
    Stefan

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Support Marta

    (@martadella)

    Hi @stefansic,

    You could use the following CSS:

    .dgwt-wcas-suggestions-wrapp {
      width: 1500px !important;
    }

    This will force the result list to be 1500px-wide. You can change it depending on the screen width:

    .dgwt-wcas-suggestions-wrapp {
      width: 100% !important;
    }
    
    @media screen and (min-width: 768px) {
    .dgwt-wcas-suggestions-wrapp {
      width: 700px !important;
    }
    }
    
    @media screen and (min-width: 1200px) {
    .dgwt-wcas-suggestions-wrapp {
      width: 1100px !important;
    }
    }

    Let me know if this is helpful!

    Regards,
    Marta

    • This reply was modified 3 months, 1 week ago by Marta.
    Thread Starter stefansic

    (@stefansic)

    Hi Martha,
    thank you very much, basically it works, but the list is not centered and so it leaves my screen on the right 😉
    How to center the list?
    Best
    Stefan

    Clint

    (@levelupclint)

    Hi @stefansic,

    Please provide your site address so we can check.

    Best regards,
    Clint

    Thread Starter stefansic

    (@stefansic)

    Hi Clint,
    thank you: https://das-goldene-tor.de
    Best
    Stefan

    Clint

    (@levelupclint)

    Hi Stefan,

    Expanding on the code provided by Marta (if you want to center the suggestions list), you can set the “left” property like below:

    .dgwt-wcas-suggestions-wrapp {
    width: 100% !important;
    left: 25vw !important;
    }

    Thread Starter stefansic

    (@stefansic)

    Hi Clint,
    thank you very much!
    best
    Stefan

    Thread Starter stefansic

    (@stefansic)

    Hi Clint,
    I was too fast and didn’t finish testing it.

    This works as long the window is static. Please take a look at the site an resize the window.
    Best
    Stefan

    Plugin Support Marta

    (@martadella)

    Hi Stefan,

    The position of the suggestion list is calculated dynamically and it’s not easy to center it with CSS. I came up with a JavaScript code snippet, that could work for you. I haven’t tested it properly, but it may put you on the right track.

    This code snippet works only with the following CSS:

    .dgwt-wcas-suggestions-wrapp {
      width: 300px !important;
    }
    
    @media screen and (min-width: 768px) {
    .dgwt-wcas-suggestions-wrapp {
      width: 700px !important;
    }
    }
    
    @media screen and (min-width: 1200px) {
    .dgwt-wcas-suggestions-wrapp {
      width: 1100px !important;
    }
    }

    If you need to set different breakpoints, then you would have to change them in both CSS and JavaScript.

    <script>
    var fiboSearchInput = document.getElementById("dgwt-wcas-search-input-1");
    var fiboSearchInputWidth = 0;
    var currentLeftPosition = 0;
    var adjustedLeftPosition = 0;
    
    if (fiboSearchInput) {
      fiboSearchInput.addEventListener('keydown', adjustFiboSearchSuggestions);
      fiboSearchInput.addEventListener('keyup', adjustFiboSearchSuggestions);
      fiboSearchInput.addEventListener('blur', adjustFiboSearchSuggestions);
      fiboSearchInput.addEventListener('focus', adjustFiboSearchSuggestions);
      fiboSearchInput.addEventListener('change', adjustFiboSearchSuggestions);
      fiboSearchInput.addEventListener('input', adjustFiboSearchSuggestions);
    }
    
    window.onload = adjustFiboSearchSuggestions;
    
    function adjustFiboSearchSuggestions() {
      fiboSearchInputWidth = fiboSearchInput.offsetWidth;
      currentLeftPosition = fiboSearchInput.getBoundingClientRect().left;
      var fiboSearchSuggestions = document.getElementsByClassName("dgwt-wcas-suggestions-wrapp");
      if (typeof fiboSearchSuggestions !== 'undefined') {
        var fiboSearchSuggestionsWidth = 300;
        if (screen.width >= 768) {
          fiboSearchSuggestionsWidth = 700;
        }
        if (screen.width >= 1200) {
          fiboSearchSuggestionsWidth = 1100;
        }
        var tmp = (fiboSearchInputWidth - fiboSearchSuggestionsWidth) / 2;
        if (adjustedLeftPosition == 0) {
          adjustedLeftPosition = tmp + currentLeftPosition;
        }
        fiboSearchSuggestions[0].style.left = adjustedLeftPosition + "px";
      }
      setTimeout(adjustFiboSearchSuggestions, 10);
    }
    </script>

    You can put this code in your theme’s footer.php file (before the closing </body> tag) or in a plugin that enables you to add JavaScript to your website.

    I hope this is helpful!

    Regards,
    Marta

    Thread Starter stefansic

    (@stefansic)

    Hello Marta,

    thank you very much. I‘m not sure the script works. I put it on my site with a plugin. If it works, the result is somehow strange.
    See yourself: https://das-goldene-tor.de

    best

    Stefan

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.