Bootstrap 4 alignment in IE 11

Question

I'm converting one of my websites from AngularJs / Bootstrap 3 to Angular 6 / Bootstrap.

In Chrome and firefox, and edige, my modal looks like this:

However, in IE11

The code:

<div class="container">
    <div class="modal-header">
    </div>
    <div class="modal-body">
      <form [formGroup]="loginForm" (keydown.enter)="onKeydown($event)">
          <div class="row form-group">
              <div class="col-12">
                  <input type="email" class="form-control" placeholder="Email" formControlName="userName" required autofocus />
                  <p *ngIf="!isValidUserName" class="help-block alert-danger">Invalid Username</p>
              </div>
          </div>
          <div class="row form-group">
            <div class="col-12">
                <input type="password" class="form-control" placeholder="Password" formControlName="password" required />
                <p *ngIf="!isValidPassword" class="help-block alert-danger">Invalid Password</p>
            </div>
          </div>
      </form>
    </div>
    <div class="modal-footer">
        <div class="grid">
            <div class="row">
                <div class="col-12">
                    <button class="btn loginBtn" (click)="login(userName.value, password.value)">
                        Login
                    </button>
                    <p *ngIf="loginError" class="help-block alert-danger">{{ loginError }}</p>
                </div>
            </div>
            <div class="row form-group">
                <div class="col text-center">
                    <label class="forgotPasswordLink" (click)="openForgotPasswordModal()">
                        Forgot password?
                    </label>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-12 col-md-6">
                    <button type="button" (click)="googleLogin()" class="btn btnGoogle googleIcon">
                        <span class="button-text">Login with Google</span>
                    </button>
                </div>
                <div class="col-12 col-md-6">
                    <button type="button" (click)="linkedInLogin()" class="btn btnLinkedIn linkedinIcon">
                        <span class="button-text">Login with LinkedIn</span>
                    </button>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-12 text-center">
                    Don't have an account? <a (click)="signUp()">Sign up</a>
                </div>
            </div>
        </div>
    </div>
</div>

I took a look on github, but none of those solutions seem to work to the best of my knowledge, is there a way to fix this inconsistency at a site level?

check bootstrap 4 API, because most of the classes name got changed, also ng-bootstrap uses bootstrap 4. — Pankaj Parkar, Nov 08 '18 at 21:17
@Pankaj I did, col-xs-12 becomes col-12, etc... and I had to add the grid div, so I got it working in all the browsers, but IE11, my question centers more around what else I need to do to get it working in IE11. — RandomUs1r, Nov 08 '18 at 21:34
After spending some more time on it, my best solution is to get rid of the row / col completely and just use divs since it's just a modal, however I'd still like a bs4 solution as other parts of the new site are being affected, I tried flex: 1 0 auto and a few other solutions with no luck, so I'm adding a bounty to help draw attention. — RandomUs1r, Nov 15 '18 at 23:30
Have you try to modify the css using -ms prefix? Equivalent of webkit of chrome but for IE11 and above — Christophe Chenel, Nov 16 '18 at 02:40
@Nandita it's a commercial site, so... not easily. However, all I'm really looking for is an example of a ngx-bootstrap modal (the ngx part probably doesn't matter) that works in IE11 and uses bs4, or flexbox classes with similar buttons on the bottom. — RandomUs1r, Nov 19 '18 at 23:18
can you please post your code here? https://stackblitz.com/edit/angular-slvxld — Jeeva J, Nov 21 '18 at 14:20
I've created stackblitz with the code you've posted - https://stackblitz.com/edit/angular-h8b2b8 please add the missing code, once we'll reproduce the problem we could help you — benshabatnoam, Nov 22 '18 at 17:16

score 2 · Answer 1 · edited Jul 13 '20 at 17:04

2

I was able to fix a very similar issue by adding

flex: 1 0 auto;

on span with col-12 that contained the message/text of the modal.

edited Jul 13 '20 at 17:04

Dharman

21,838
18
57
107

answered Jul 13 '20 at 15:02

Sarfraz

21
3

JBoothUA · Answer 2 · 2018-11-20T06:21:47.133

0

Instead of using container can you try using container-fluid

It looks like it may have do to some width:auto styling? Bootstrap 4 IE 11 does not work

If you're looking at the site side-by-side on IE and Chrome you can use the F12 dev tools to look at the elements and styles, you just have to find the element/styling that is rendering differently.

edited Nov 20 '18 at 06:21

answered Nov 20 '18 at 06:05

JBoothUA

2,465
3
15
40

1

if you can create a StackBlitz or something like that we can take a look at it online – JBoothUA Nov 20 '18 at 06:23

score -1 · Answer 3 · answered Nov 22 '18 at 17:56

-1

.container,.modal-header,.modal-body,modal-footer, input{
width: 100% !important;
}


div{
display:block;
float:left;
}

answered Nov 22 '18 at 17:56

Mahi

2,846
2
23
54

1

While this may provide a solution for the question, you should describe in more detail why. – Murphy Nov 23 '18 at 08:14

Bootstrap 4 alignment in IE 11

3 Answers3

Linked