Set the size when component inside

[mrjohnr]

Hi.it is possible to set the size when have component inside,for example I want to use it for edit data (large size) or for simple dialogs (small size)?
I want to put inline form inside:

<form class="form-inline" action="/action_page.php">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
    <div class="form-check">
        <label class="form-check-label">
            <input class="form-check-input" type="checkbox"> Remember me
        </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

for me it looks very small : https://i.imgur.com/RNlDrpb.png
thanks

[zurfyx]

Hey @mrjohnr

You can set the modal size to whatever you want. Otherwise it'll be the content inside it the one deciding over the minimum width and height.

For example, I have a medium-sized modal with the following style:

.modal-dialog {
  width: 80%;
  max-width: 750px;
  height: 80%;
}

[mrjohnr]

thanks.for the modal it seems that css works only when it is put in general syle.css
it would be fine to can be configured inside current component
thanks

[zurfyx]

Ah, that's probably because Angular by default generates CSS that targets only that component (i.e. .some-class[_ngcontent-c18]). Hence, it will not match if the modal component is its parent.

You have to prefix it with /deep/ if you want it to match the global scope.

/deep/ .modal-dialog { ... }