NgTemplate Bootstrap not take my CSS class

Question

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.

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>

Sheik Althaf · Accepted Answer · 2019-03-28 11:13:07Z

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

answered Mar 28, 2019 at 11:13

Sheik Althaf

1,61511 silver badges16 bronze badges

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

2 Comments

JoseJimRin Over a year ago

Perfect! It works for me! But it is possible to set this class in the component.css against style.css?

Sheik Althaf Over a year ago

no, because the modal created in body and it is not related to our component

Collectives™ on Stack Overflow

NgTemplate Bootstrap not take my CSS class

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related