Topic: .form-outline not working on multiple forms

BozaiAkos free asked 10 months 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 10 months 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 https://mdbootstrap.com/docs/standard/forms/select/


BozaiAkos free commented 10 months 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 10 months ago

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


BozaiAkos free commented 10 months 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 10 months ago

Could you reproduce your issues in a snippet https://mdbootstrap.com/snippets/ ? I have too little information to debug your issue.


BozaiAkos free commented 10 months ago

Sure, thank you for spending time on my ticket! https://mdbootstrap.com/snippets/standard/bozaiakos/3638617


Michał Duszak staff commented 10 months 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. https://mdbootstrap.com/snippets/standard/m-duszak/3643466


BozaiAkos free commented 10 months ago

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


FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • User: 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