Topic: Modal-fluid right fixed header
Hello,
I use the modal-fluid-right to display some notifications, but when I have a lot of alerts and scroll to the bottom of the list the modal-header disappear and when I add the fixed-top class it takes all the screen width.
So, how can I have a fixed top modal header?
Thanks,
Jerome
Marta Szymanska staff pro premium answered 5 years ago
Hi,
would you create a snippet showing the problem here: https://mdbootstrap.com/snippets/. I'll try to help you.
Best, Marta
jouvrard pro answered 5 years ago
Hello,
Here is my snippet: https://mdbootstrap.com/snippets/jquery/furax/847222
As you can see, what I want is to set a "fixed top" title for my modal, but if I add the "fixed-top" class, the title takes all the frame width.
Thanks,
Jerome
Marta Szymanska staff pro premium answered 5 years ago
Hi,
if you have full height modal, I think you don't need a .fixed-top
class. If you remove this, it works fine.
Best, Marta
jouvrard pro answered 5 years ago
I have modified the snippet by removing the "fixed-top" class and as you can see in this case the title doesn't stay at the top of the modal, but scroll with the content. What I would like to have is a fixed title, with a scrollable content.
Maybe I can add a div for my content with full height too and with a "overflow:scroll" style?
jouvrard pro answered 5 years ago
It seems to work: https://mdbootstrap.com/snippets/jquery/furax/847222 But I don't understand why I have to add "h-50" in the modal-dialog...
AdamJakubowski staff pro premium priority commented 5 years ago
Hi,
"h-50" is responsible for setting modal height to 50% on smartphones. Best, Adam
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.2
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: No