'x' close button does not render in the correct place in bootstrap plugin

[rmcsharry]

Plunker: http://plnkr.co/edit/QtOzvr?p=preview

• I'm submitting a ... [x ] bug report [ ] feature request [ ] question about the decisions made in the repository

• Do you want to request a feature or report a bug? Report bug.

• What is the current behavior? Using the showClose(true) results in the 'x' being inserted before the title:

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via See code below.

• What is the expected behavior? 'x' close should be on far right of the header/title area.

• What is the motivation / use case for changing the behavior? Incorrect bootstrap template implemented.

• Please tell us about your environment:

• ngx-modialog version 3.03.

• Angular version: 4.3.4

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc) When I examine the html, the title h3 is rendered AFTER the close button. If you look at the code in the library: https://github.com/shlomiassaf/ngx-modialog/blob/master/src/ngx-modialog/plugins/bootstrap/src/message-modal.component.ts you can see the template is wrong:

@Component({
  selector: 'modal-title',
  encapsulation: ViewEncapsulation.None,
  template: `<div [ngClass]="context.headerClass" [ngSwitch]="titleHtml">
      <button *ngIf="context.showClose" type="button" class="close" 
              aria-label="Close" (click)="dialog.dismiss()">
          <span aria-hidden="true">×</span>
      </button>
      <div *ngSwitchCase="1" [innerHtml]="context.titleHtml"></div>
      <h3 *ngSwitchDefault class="modal-title">{{context.title}}</h3>
 </div>`
})
export class BSMessageModalTitle {

I believe it should be like this:

@Component({
  selector: 'modal-title',
  encapsulation: ViewEncapsulation.None,
  template: `<div [ngClass]="context.headerClass" [ngSwitch]="titleHtml">
      <div *ngSwitchCase="1" [innerHtml]="context.titleHtml"></div>
      <h3 *ngSwitchDefault class="modal-title">{{context.title}}</h3>
      <button *ngIf="context.showClose" type="button" class="close" 
              aria-label="Close" (click)="dialog.dismiss()">
          <span aria-hidden="true">×</span>
      </button>
 </div>`
})
export class BSMessageModalTitle {

[rmcsharry]

If you modify the demo plunker by shortening the title you can see the problem clearly:

[ashfaqch]

Hope this example helps: https://github.com/ashfaqch/angular-modal-dialog-example

[rmcsharry]

@ashfaqch Thanks for the example but you have solved the problem by implementing your own template, and are not using the template in the library itself.

However your template does confirm that my suggested fix is correct:

...which is that the close button should be in the template BEFORE the modal title.

[hahaliu005]

This problem still exists in ^6.0.0 version

[bisigc]

As a workaround I set the following css properties in my own style.css. This places the close button in the upper right corner of the modal header and the title is placed on the left side.

.modal-header .close {
    position: absolute;
    right: 0;
    margin: -1rem 0rem -1rem auto;
}

[mohamednaleem]

@bisigc It is working as expected after applying the class.