Topic: modal issues with navbar

demzl25 priority asked 3 years ago


Hi,

I have issue with modal after i close it and navbar become to wide. I'm sending you video that shows this issue: https://drive.google.com/file/d/1xxC1OLvwZaMfzIYEWFtcwtwiIESdOLxy/view?usp=sharing And image: https://drive.google.com/file/d/18bDgJVYCHJEiB3ZFh0aE8zwwEg1SGGGK/view?usp=sharing

Link to the website: https://www.regresija-hipnoza.si/

I'm sending also code snippet: https://mdbootstrap.com/snippets/jquery/demzl25/2629129?view=standard

Thanks,Damjan


Marcin Luczak staff answered 3 years ago


Hello,

I've checked your webpage and snippets and it seems that there is some issue with your opening and closing tags, because as you can see in my snippet your modal and navbar work fine when they are only components on the webpage: https://mdbootstrap.com/snippets/jquery/marcin-luczak/2637041

At line 727 from your snippet, there is an additional closing main tag that doesn't have an opening tag, which seems to be corrupting some parts of your code.

Also removing paragraphs between 230 and 252 lines seems to be fixing this modal/navbar issue.

Please check your HTML and make sure everything is opened and closed right.

Best regards, Marcin


demzl25 priority commented 3 years ago

Hello,

Thank you!

Now i have fixed HTML and still I have the same issue. I'm not sure what is wrong!

I have created new code snippet of the HTML code: https://mdbootstrap.com/snippets/jquery/demzl25/2646816?action=forum_snippet

Best regards, Damjan


Marcin Luczak staff commented 3 years ago

Hi,

Unfortunately, I can't find what is a problem inside your code. Using the clean composition of MDB modal, navbar, and header I can't reproduce your issue so it must be something inside the rest of your code. Maybe you still have some not closed tags or styles that cause your problems. Please check if everything is ok inside your code. To not leave you without any help I've created a snippet that will 'hot-fix' your navbar width issue. Inside your <script></script> tag please add following: $("#darkModalForm").on('shown.bs.modal', function(){ $("#darkModalForm").css("padding-right", "0"); $("body").css("padding-right", "0"); $(".navbar").css("margin-right", "0"); });

This should prevent your navbar from widening when the modal is open.

I hope that this will work for now, Best regards, Marcin



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.19.1
  • Device: desktop
  • Browser: chrome
  • OS: win10
  • Provided sample code: No
  • Provided link: Yes