Topic: .form-outline not working on multiple forms

BozaiAkos free asked 2 years ago

Hello! I'm trying to add more than one forms to my page, but the .form-outline only works on the first form. The code provided isn't working:

        document.querySelectorAll('.form-outline').forEach((formOutline) => {
            new mdb.Input(formOutline).init();

Here is a snippet about my page: Hastebin
Thank you for giving a minute for me, and answering my question!
Best Regards!

Michał Duszak staff answered 2 years ago

Hello, you mean select components, right? Syntax is not right - Select component doesn't require form-outline wrapper, but they do require the select class Please see Select docs to get familiar with the syntax

BozaiAkos free commented 2 years ago

Hello! Thank you for your quick answer. Sorry, I was not obvious. I have the free version of the MDB, so I can only solve the Select with this “cheat”. But there is the same problem with text inputs too.

Michał Duszak staff commented 2 years ago

I can't see any text inputs in your snippet.

BozaiAkos free commented 2 years ago

I mean, if I use a text input, there is the same problem. In this case, I don't have to use any text inputs, but on other pages there are some.

Michał Duszak staff commented 2 years ago

Could you reproduce your issues in a snippet ? I have too little information to debug your issue.

BozaiAkos free commented 2 years ago

Sure, thank you for spending time on my ticket!

Michał Duszak staff commented 2 years ago

What happens is that you are trying to append Select in an unexpected way, which causes error in the script. Once you introduce the proper syntax to Select, or delete this invalid Select element, your Input text fields work just fine. If you want to run a free version, you can still use native Bootstrap select. Just remove the form-outline wrapper.

BozaiAkos free commented 2 years ago

Thank you Michal, that was the problem. I'll mark you answer as the best, and then close the ticket.


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



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: PC
  • Browser: Google Chrome
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: Yes