How to hide the Scrollbar while using a Modal from LwC?

Question

I have certain contents under body, but as the contents increases a scrollbar starts to appear as expected. But is there a way to hide it and still the modal is scrollable? If there's any or anything similar please let me know. Thanks

<lightning-modal-header></<lightning-modal-header>
<lightning-modal-body></<lightning-modal-body>
<lightning-modal-footer></<lightning-modal-footer>

Youth Dream · Accepted Answer · 2024-09-23 00:34:18Z

1

You can hide scroll bar of lightning-modal-body but keep scrollable inside it.

Let me provide sample code:

// It will works for chrome, safari and edge
lightning-modal-body::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

// It will works for Firefox
lightning-modal-body {
  scrollbar-width: none;
}

// It will keep scrollable inside lightning-modal-body
lightning-modal-body {
  overflow-y: scroll;
}

answered Sep 23, 2024 at 0:34

Youth Dream

1,0242 gold badges7 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to hide the Scrollbar while using a Modal from LwC?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related