Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Quicksearch with "common results" dropdown hide input on mobile


Hi,

I built quick search with the option that when the user clicks the input I show him "common results" before he starts to type.
The issue is that on mobile and search input is disappear and the dropdown of search is getting focus above it.
I searched for any solution about it but found nothing


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)


Hi,

Thank you for the update. We will check this and include the fix in the next v8.2.9 update soon.

Regards,
Sean



Hi,

Thanks for the heads-up. We will take a look and check the issue.
May I know which version and demo are you referring to?

Regards.



Hey,

I'm using Metronic 8.
After some research I did, the issue because the submenu of search is using "Popper" library.
"Popper" has some default responsive logic that change the location of that menu depends on the space it have left.
So in case of mobile and for example when I click the search input, the submenu is opened and the mobile keyboard, it causes the issue that the submenu is hiding the input so we cannot see what we typing on the search.

I solved it temporary by disabling Popper responsive positions for this search specifically.

Thanks.



Hi,

Thank you for the update. We will check it and fix the issue accordingly.

Could you please provide your change? How have you checked it?

Regards,
Sean



Hey,

I checked it by debugging the js on live and understood what happened there, I saw that something is setting the menu position that out of my control.

my editting was something like this, on js class that uses the component, maybe can do it more generic:


KTUtil.data(searchContainer).get("popper").setOptions({
modifiers: [
{
name: "computeStyles",
options: {
adaptive: false,
gpuAcceleration: false
},
},
{
name: "flip",
enabled: false // Disable flip behavior
}
],
});


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(