question Now-Modal - change size --- Now Experience in Developer forum

Now-Modal - change size --- Now Experience

Tommy Jensen — Sat, 27 Jun 2020 20:42:34 GMT

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%;
}

Re: Now-Modal - change size --- Now Experience

Rishabh Jha — Sun, 28 Jun 2020 06:48:41 GMT

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/)

Re: Now-Modal - change size --- Now Experience

Tommy Jensen — Sun, 28 Jun 2020 09:58:34 GMT

I already tried this and it does not work.

Re: Now-Modal - change size --- Now Experience

Tommy Jensen — Sun, 28 Jun 2020 10:53:57 GMT

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)

Re: Now-Modal - change size --- Now Experience

Rishabh Jha — Sun, 28 Jun 2020 14:06:19 GMT

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/)

Re: Now-Modal - change size --- Now Experience

Tommy Jensen — Sun, 28 Jun 2020 14:11:58 GMT

I have done that already. Nothing changes the size. Regardless if I use %, px or rem sizes.

Re: Now-Modal - change size --- Now Experience

Mah2 — Mon, 07 Oct 2024 05:32:30 GMT

any solution of this, I am also facing same issue

Re: Now-Modal - change size --- Now Experience

Kevin83 — Thu, 07 Nov 2024 18:57:04 GMT

You may want to use size: custom

https://horizon.servicenow.com/workspace/components/now-modal