CODEWITHSUNDEEP
cssangularbootstrap-4bootstrap-modal
JoseJimRin
JoseJimRin

Reputation: 402

NgTemplate Bootstrap not take my CSS class

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>

Upvotes: 1

Views: 2280

Answers (1)

Sheik Althaf
Sheik Althaf

Reputation: 1605

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

Upvotes: 1

Related Questions