Now-Modal - change size --- Now Experience

[Tommy Jensen]

I have use a now-modal in my component but I want it bigger than "lg" how can I do that?

I assume I need to use :host in CSS. I have tried this in the component styles.scss:

:host(now-modal) {
  max-width: 98%;
  width: 80%;
}

[Rishabh Jha]

Hi @Tommy Jensen ,

Though I haven't used the Now Experience UI yet, but I think the now-modal uses the bootstrap modal under the hood, and if that's the case, the rendered HTML page would probably have modal-sm, modal-lg etc. classes, depending on the modal size that you've defined (you can check that by inspecting the rendered page).

I'd configure the now-modal for a "lg" size, and in the css file, i'd try using:

@media screen and (min-width: 950px) {
  .modal-lg {
    width: 800px; /* Set it to your desired width for the large modal */
  }
 }

Thanks & Regards,

Rishabh Jha

Aavenir (http://www.aavenir.com/)

[Tommy Jensen]

I already tried this and it does not work.

[Tommy Jensen]

So I almost got it.

Turns out that if the modal property "size" is set to a size not supported! (ie NOT sm, md or lg) like xl then the width gets set to 100%.

Thats not exactly what I want as that does not look so good.

So I tried adding my own class to the modal component

className="article-modal-xl"

and class is defined in styles.scss

.article-modal-xl {
  max-width: 90%;
  width: 90%;
}

When running and I inspect I see my new class on the modal but it has not effect ??

It looks like this (and modal is 100% wide)

[Rishabh Jha]

Can you try using px (like 800px) instead of 100%, and see if that works? 100% width limits the size to the container's width.

Thanks & Regards,

Rishabh Jha

Aavenir (http://www.aavenir.com/)