Styling bootstrap modal in Angular 5

Question

I am currently trying to style a bootstrap 4 Modal window within Angular 5.

I have the scss imported into my global.scss and I am giving the modal window the customClass as followed.

this.modalService.open(content, { windowClass: 'tutorial'});

So far so good the popup shows up, in the bottom left corner. But what I want to achieve is a bottom modal like in this case.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_bottom

but whatever I do I cannot seem to get it working.

I just don't seem to be able to stretch the modal all the way. This is my current scss

    .tutorial {
    position: fixed;
    top: auto;
    bottom: 0px;
    width: 100%;

    .modal-dialog{
        margin: 0;
        }
    }

I assumed width: 100% would be fine but somehow it doesn't work. Any ideas?

try `min-width:100%;` or `width:100% !important;` – Dhaval Jardosh Apr 01 '18 at 04:10 — Dhaval Jardosh, Apr 01 '18 at 04:10
Okay min-width 100% in modal-dialog worked – x3lq Apr 01 '18 at 11:56 — x3lq, Apr 01 '18 at 11:56

score 0 · Answer 1 · answered Apr 01 '18 at 12:58

So doing the following worked for me

.tutorial-bottom {
    position: fixed;
    top: auto;
    bottom: 0px;

    .modal-dialog{
        min-width: 100%;
        margin: 0;
    }

    .modal-header {
        background: #3e8acc;
        color: white;
      }
   }

Thx to @DahvalJardosh for pointing me in the right direction

Styling bootstrap modal in Angular 5

1 Answers1