React Rodal not fitting the text inside the modal window

Question

I have the following simple project on StackBlitz:

with this style:

https://stackblitz.com/edit/rodal-issue?file=src%2FModalWindow%2FModalWindow.less

.modalWindow {
  z-index: 1050 !important;
  .rodal-mask {
    background-color: rgba(13, 54, 69, 0.6);
  }
  .rodal-dialog {
    box-sizing: content-box;
    width: auto !important;
    max-width: 800px;
    border-radius: 12px;
    text-align: justify;
    padding: 60px;
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;

    // maybe we need some extra styling here
    // ...

    p {
      margin-bottom: 60px;
    }
    @media (max-width: 980px) {
      max-width: 100%;
      margin: auto 20px;
      padding: 40px 20px;
      font-size: 12px;
      line-height: 24px;
      p {
        margin-bottom: 20px;
      }
    }
    .rodal-close {
      display: none;
    }
    .button-close {
      display: block;
      border: 2px solid #2A7DDF;
      color: #2A7DDF;
      width: 250px;
      height: 60px;
      border-radius: 50px;
      font-size: 24px;
      line-height: 56px;
      margin: 0 auto;
      text-align: center;
      text-decoration: none;
    }
  }
}

As you can see on the JS file below, I'm using the NPM module: Rodal to get the Modal window:

https://stackblitz.com/edit/rodal-issue?file=src%2FModalWindow%2FModalWindow.js

My problem is that the rendering is not correct (I'm interested on Firefox and Chrome) because the modal window doesn't fit to the content:

Any idea on how to make Rodal to fit whatever variable content (dynamic size)?

If you know some approach for this, you can fork the StackBlitz project above and paste the link on your response.

Thanks in advance!

user_8407174 · Answer

Rodal has a prop - customStyles that expects an object. You will then pass an object of styles to it and that should solve your problem. The style you want is overflow-y:scroll Example below:


{children}

React Rodal not fitting the text inside the modal window

1 Answers