1

I created a css modification to change the modal width to 50% against 100% of the view. But the class modal-content is duplicated against modificated.

enter image description here

enter image description here

CSS

  .modal-content{
    width: 50%;
  }

HTML

<ng-template #content>
  <div class="modal-content">
    <div class="modal-header">
      <i class="fa fa-heart"></i> A
    </div>
    <div class="modal-footer">
      <i class="fa fa-heart"></i> B
    </div>
  </div>
</ng-template>

1 Answer 1

1

I also faced the same issue in my development and i found the solution with help of windowClass in ng-bootstrap

const modalRef = this.modalService.open(UserPasswordComponent, {
  windowClass: 'custom-modal-width' // add a custom class here where you open the modal
});

In your style.css control the width

.custom-modal-width .modal-content {
    width: 50%;
}

make sure to remove your model-content class in your template

Sign up to request clarification or add additional context in comments.

2 Comments

Perfect! It works for me! But it is possible to set this class in the component.css against style.css?
no, because the modal created in body and it is not related to our component

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.