How to change the size of ComposedModal?

[zbeedatm]

What package(s) are you using?

• carbon-components
• carbon-components-react

Summary

I want to make the opened ComposedModal bigger in order to put more content inside with minimum vertical slide.

Relevant information

[emyarod]

can you provide a Code Sandbox example showing the issue you are facing? but a general answer would be to just override the existing component CSS with what you need

[zbeedatm]

Talknig generally I would like to have the modal opens with more size (width & hight)

tried using this css to achieve it but it's not taking affect:

<ComposedModal
{...propsComposedModal.composedModal()}
open={open}
onClose={() => this.toggleModal(false)}
height={500}
className="modal"
>

@import "../App.css";

div.solid {
width: 400px;
outline: 1px;
outline-color:black;
outline-style: solid;
/box-sizing: border-box;/
padding: 10px;
}

div.inline {
float: left;
display: inline-block;
}

hr.dotted {
display: block;
height: 1px;
border: 0;
border-top: 1px dashed #ccc;
margin: 1em 0;
padding: 0;
}

.Description {
/font-size: calc(8px + 1vmin);
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;/
color: gray;
}

body, html {
height: 100%;
}

.content, .modal {
position: absolute;
top:0;
left:0;
height:100%;
width: 100%;
}

.content {
/background-color: orange;/
z-index:100;
}

.modal {
z-index:101;
background-color: #000;
visibility: hidden;
opacity: 0;
transition: opacity 0.5s, visibility 0s 0.5s;
}

.modal.active {
opacity: 1;
visibility: visible;
transition: opacity 0.5s;
}

https://codesandbox.io/s/codesandbox-xoqbu

[emyarod]

your code sandbox is broken, but is there any reason why applying styles to .bx--modal-container does not work?

[zbeedatm]

I updated my sandbox.

When I used the .bx--modal-container and updated it's size to a value lower than 750px the size change was reflected, but when trying 800px it's not expanding any more!

.bx--modal-container {
width: 800px;
}

[emyarod]

the code sandbox you provided does not contain any modal code

[zbeedatm]

Seems it wasn't saved. Pls try again

[emyarod]

unset the max-width value

.bx--modal-container {
  max-width: none;
  width: 800px;
}