Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: modal issues with navbar

demzl25 priority asked 4 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 4 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 4 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 4 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
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

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
Tags
navbar
About author
demzl25
197Support score
55Questions 2Answers 224Snippets