1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Bootstrap navbar's search form and auto-complete not working

tannguyen pro asked 6 years ago

Hello, I'm using MDB pro 4.4, but I am having a problem with display suggestion's list in search form using auto-complete : search form: https://mdbootstrap.com/components/navbar/? autocomplete: https://mdbootstrap.com/components/bootstrap-autocomplete/ Look like the suggestion's list cannot expand the height of navbar. Could you please have a check.   Thank you.

Jakub Strebeyko staff commented 6 years ago

Hi there tannguyen, Thanks for reaching out! Could you please provide the DevTools console output along with your code for reference? Thanks. With Best Regards, Kuba

tannguyen pro commented 6 years ago

Hi Kuba, Thank you for your answer. You could try to reproduce with the following steps: - Paste the javascript's code of this page: https://mdbootstrap.com/components/bootstrap-autocomplete/ into the Devtools console's one of search form on this page: https://mdbootstrap.com/components/navbar/? - Please note that: there is no error in the console. The states' suggestion is well added right after search form, but it cannot be displayed. Thank you

tannguyen pro commented 6 years ago

Hi Kuba, Thank you for your answer. You could try to reproduce this problem with the following steps: – Paste the javascript’s code of this page: https://mdbootstrap.com/components/bootstrap-autocomplete/ into the Devtools console’s one of search form on this page: https://mdbootstrap.com/components/navbar/? – Please note that: there is no error in the console. The states’ suggestion is well added right after search form, but it cannot be displayed. Thank you

rachad malek free answered 3 years ago

hello, I hope you are all well. I detere this post after 3 years to report the same problem relating to the autocompleter in the navbar. the results cannot be displayed in mdb-option. thank you very much.

Marcin Luczak staff commented 3 years ago

Hello Rachad,

Please provide a snippet showing your autocomplete component used within the navbar, so I can better understand your problem. Please also take a look at my snippet : https://mdbootstrap.com/snippets/jquery/marcin-luczak/2596355

Regards, Marcin

kellym80 pro answered 6 years ago

@tannguyen I was trying to get this to work also. To do this until the fix:
  1. put an html id on the nav or form or your own custom css class
  2. add some custom styles to override the position:absolute; css, it works with static or relative.  Basically you want to target the form in your nav and then apply a position that is static or relative to your element.
  3. If you have set a height to the nav then this will just dropdown kind of like a dropdown would. If you haven't changed the mdb default nav height then the nav will expand as the drop down does.
Here is a quick fix that might help you: mdb _custom.scss if you are are using scss or wherever you store your custom scss styles #testnav { .mdb-autocomplete-wrap { position: static; } }  

Bartłomiej Malanowski staff commented 6 years ago

Thank you for your suggestion. We'll take a look into it. I hope we'll fix this issue in the nearest future

Jakub Strebeyko staff answered 6 years ago

Hi there tannguyen, Apparently, the autocomplete component has not been designed to accompany the navbar, but as it seems a valuable feature to have, appropriate bug report and feature request has been issued. Thanks a ton! The Team shall decide whether to include it into next release. With Best Regards, Kuba

tannguyen pro commented 6 years ago

Hi Jakub, Thank you for reply. This would help me a lot if we have this feature in next release and support. Best Regards, Tan Nguyen.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
tannguyen
Pro User 0Support score
2Questions 0Answers 0Snippets