How to change the size of a modal materializecss

Question

sorry if the question is very simple but I'm new using materializeCss

As I can increase the height and width of a modal materializecss ??

Add so code so that we can suggest answers. – Ani Menon May 03 '16 at 04:03 — Ani Menon, May 03 '16 at 04:03

score 19 · Accepted Answer · edited May 23 '17 at 12:32

19

In order to set the height and width of the MaterializeCSS Modal you need to edit the CSS of

.modal { width: 75% !important ; height: 75% !important ; }  /* increase the height and width as you desire */

See more explanation as written by pihyper here: https://stackoverflow.com/a/34580086/3133641

edited May 23 '17 at 12:32

Community

1
1

answered May 03 '16 at 02:46

Tosch

475
5
12

4

If you find a question to be a *duplicate*, flag it. Don't copy the same answer again. – Ani Menon May 03 '16 at 04:05
1

that doesn't seem to work (anymore?), but the solution below with max-height works like a charm. – bartekmo Oct 31 '19 at 15:39
Yep, I guess the OP should change the accepted answer to the one with the "max-height: 100%; overflow: visible" – Cătălin Rădoi Jan 17 '20 at 08:35

Nishant Baranwal · Answer 2 · 2018-10-31T05:23:15.383

8

to remove vertical height only, add this in modal class. just make sure this definition does not get overwrite (avoid using !important and use specificity instead).

.modal { max-height: 100%; overflow: visible}

edited Oct 31 '18 at 05:23

answered Aug 16 '18 at 11:14

Nishant Baranwal

1,048
1
10
18

score 1 · Answer 3 · answered Aug 11 '19 at 07:11

1

I believe the accepted offer is not the best. Use the chrome developer tools or just add the specific modal ID. You may have more than one

div#modal5 {
width: 50%
}

answered Aug 11 '19 at 07:11

user2060451

2,576
3
24
31

score 0 · Answer 4 · answered Feb 13 '21 at 06:15

0

set your modal class to this code.


    .modal-info {
      max-width: 100% !important;
      max-height: 100% !important; 
      overflow-y: auto;
    }

answered Feb 13 '21 at 06:15

liaqat ali

1
2

How to change the size of a modal materializecss

4 Answers4