Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Mobile search function switched to widescreen bug


When I turn on the search function on the small screen, everything is normal, but when I switch to widescreen, there will be a blank page

I don't want this blank page to exist

<img src="https://clearseve.com/2.gif" />

KTSearch options
showOnFocus: false
minLength: 1
layout: 'menu'
keypress: true
trigger: 'auto'


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)


Can you handle this issue



Hi,

Could you please confirm which Metronic version are you using ?

Can you try to replace "src/js/components/search.js" with https://gist.github.com/keen333/11080a4e71430dfa34ae3e338ce487c6 version and recompile your assets with gulp or webpack following the docs guide?

Regards,
Sean



I am using the latest version of v8.2.8

This is the example code I wrote:
https://gist.github.com/ClearSeve/93a3d2b6caea82746dc1904bc1858dd6

Firstly, click on the search icon in small screen mode
Second, drag the browser window to the large screen
It will reproduce the problem



Hi,

Sorry for the late reply. We are checking this issue and provide a fix ASAP.

Regards,
Sean



How is this problem now?


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  :(