Results wider than the search field

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 years, 4 months ago by Marta.

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

Hi @stefansic,

Please provide your site address so we can check.

Best regards,
Clint

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

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;
}

Hi Clint,
thank you very much!
best
Stefan

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

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

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