Topic: Modal-fluid right fixed header

jouvrard pro asked 4 years ago


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


jouvrard pro answered 4 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...


Adam Jakubowski staff commented 4 years ago

Hi,

"h-50" is responsible for setting modal height to 50% on smartphones. Best, Adam


jouvrard pro answered 4 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?


Marta Wierzbicka staff commented 4 years ago

Hi,

try to add this :)

Best, Marta


Marta Wierzbicka staff answered 4 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 4 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 Wierzbicka staff answered 4 years ago


Hi,

would you create a snippet showing the problem here: https://mdbootstrap.com/snippets/. I'll try to help you.

Best, Marta



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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