Bootstrap UI Angular modal doesn't show as a pop up

Question

What I have: https://rawgit.com/emilyeserven/testwebsites/master/js/angular/chara-select/index.html

At the bottom are buttons to open modal boxes. However, when they're clicked, they just show at the top without more than the bootstrap button styling.

The current modal code is adapted from the Bootstrap UI demo site (I only changed the name of the app module). The unmodified code was tested the code in a sandbox on MAMP, so I know that works. I'm not sure where the problem is coming from exactly, since the console isn't showing any out-of-the-ordinary errors.

Any directly modal-related HTML code is at the bottom of index.html. Likewise, any directly modal-related JS is in js/modal.js.

GitHub Repository: https://github.com/emilyeserven/testwebsites/tree/master/js/angular/chara-select

Any help in pointing me in the right direction would be greatly appreciated!

https://stackoverflow.com/questions/1122942/linq-to-sql-left-outer-join-with-multiple-join-conditions — Dev Team, Sep 17 '20 at 07:50

score 1 · Accepted Answer · answered Nov 10 '16 at 18:03

1

As far as I can see, you are using a custom build of bootstrap. It doesn't contain any styles for modals. Try to load https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css instead of your bootstrap.css and it will work.

answered Nov 10 '16 at 18:03

aggiustino

26
4

This was it, thank you so much! The GitHub repository has been updated. :) – Emily Serven Nov 10 '16 at 18:09

score 0 · Answer 2 · answered Aug 17 '20 at 18:41

<mat-toolbar>
  <span>{{service.form.controls['$key'].value?"Modify Employee":"New Employee"}}</span>
  <span class="fill-remaining-space"></span>
  <button class="btn-dialog-close" mat-stroked-button (click)="onClose()" tabIndex="-1"><mat-icon>clear</mat-icon></button>
</mat-toolbar>
<form [formGroup]="service.form" class="normal-form" (submit)="onSubmit()">
  <mat-grid-list cols="2" rowHeight="300px">
    <mat-grid-tile>
      <div class="controles-container">
        <input type="hidden" formControlName="$key">
        <mat-form-field>
          <input formControlName="fullName" matInput placeholder="Full Name*">
          <mat-error>This field is mandatory.</mat-error>
        </mat-form-field>
        <mat-form-field>
          <input formControlName="email" matInput placeholder="Email">
          <mat-error>Invalid email address.</mat-error>
        </mat-form-field>
        <mat-form-field>
          <input formControlName="mobile" matInput placeholder="Mobile*">
          <mat-error *ngIf="service.form.controls['mobile'].errors?.required">This field is mandatory.</mat-error>
          <mat-error *ngIf="service.form.controls['mobile'].errors?.minlength">Minimum 8 charactors needed.</mat-error>
        </mat-form-field>
        <mat-form-field>
          <input formControlName="city" matInput placeholder="City">
        </mat-form-field>
      </div>
    </mat-grid-tile>
    <mat-grid-tile>
      <div class="controles-container">
        <div class="add-bottom-padding">
          <mat-radio-group formControlName="gender">
            <mat-radio-button value="1">Male</mat-radio-button>
            <mat-radio-button value="2">Female</mat-radio-button>
            <mat-radio-button value="3">Other</mat-radio-button>
          </mat-radio-group>
        </div>
        <mat-form-field>
          <mat-select formControlName="department" placeholder="Department">
            <mat-option>None</mat-option>
            <ng-container *ngFor="let department of departmentService.array">
              <mat-option value="{{department.$key}}">{{department.code}}-{{department.name}}</mat-option>
            </ng-container>
          </mat-select>
        </mat-form-field>
        <mat-form-field>
          <input formControlName="hireDate" matInput [matDatepicker]="picker" placeholder="Hire Date">
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>
        <div class="add-bottom-padding">
          <mat-checkbox formControlName="isPermanent">Permanent Employee</mat-checkbox>
        </div>
        <div class="button-row">
          <button mat-raised-button color="primary" type="submit" [disabled]="service.form.invalid">Submit</button>
          <button mat-raised-button color="warn" (click)="onClear()">Clear</button>
        </div>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
</form>

Check if you can adjust your answer to the question asked. Yours seems to be angular where the question asks for angularjs. Try to add some comments to your snippet that help the reader understand what's going on and how it helps with the question. — casenonsensitive, Aug 17 '20 at 20:33
.col-xl-6 { -webkit-box-flex : 0; -webkit-flex : 0 0 50%; -moz-box-flex : 0; -ms-flex : 0 0 50%; flex : 0 0 50%; max-width : 50%; } — test, Sep 03 '20 at 16:39

Bootstrap UI Angular modal doesn't show as a pop up

2 Answers2