Topic: modal issues with navbar
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
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 pro premium 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: 4.19.1
- Device: desktop
- Browser: chrome
- OS: win10
- Provided sample code: No
- Provided link: Yes