在angular2中使用bootstrap模态，关闭模态会震动

Question

When I open the window, the page wider, I think it is the problem of the scroll bar, could you tell me how to solve in angular2?

it is a list:

<tbody>
    <tr *ngFor="let interview of interviews;" role="row" class="gradeA">
      <td class="col-sm-2" style="text-align: left;">{{ interview.company.name }}</td>
      <td class="col-sm-1" style="text-align: left;">{{ interview.inviter.real_name }}</td>
      <td class="col-sm-1" style="text-align: left;" *ngIf="interview.interviewee.user_id==0">未知</td>
      <td class="col-sm-1" style="text-align: left;" *ngIf="interview.interviewee.user_id!=0">{{ interview.interviewee.real_name }}</td>
      <td class="col-sm-1" style="text-align: left;" *ngIf="interview.notice_type==0">
        <a data-toggle="modal" data-target="#modal" (click)="showModal(interview)">短信</a>
      </td>
      <td class="col-sm-1" style="text-align: left;" *ngIf="interview.notice_type==1">
        <a data-toggle="modal" data-target="#modal" (click)="showModal(interview)">邮件</a>
      </td>
      <td class="col-sm-1" style="text-align: left;">{{ interview.interview_time }}</td>
      <td class="col-sm-1" style="text-align: left;" *ngIf="interview.status==0">发起面试</td>
      <td class="col-sm-1" style="text-align: left;" *ngIf="interview.status==1">确认面试时间</td>
      <td class="col-sm-1" style="text-align: left;" *ngIf="interview.status==2">面试完成</td>
      <td class="col-sm-1" style="text-align: left;" *ngIf="interview.status==3">面试者没有参加面试</td>
    </tr>
</tbody>

the modal:

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">通知内容</h4>
      </div>
      <div class="modal-body" *ngIf="selectedInterview !== undefined">
        <span style="font-weight:bold;">公司名称：</span><p>{{ selectedInterview.company.name }}</p>
        <span style="font-weight:bold;">面试官：</span><p>{{ selectedInterview.inviter.real_name }}</p>
        <span style="font-weight:bold;">应聘者：</span><p>{{ selectedInterview.interviewee.real_name }}</p>
        <span style="font-weight:bold;">通知内容：</span><p>{{ selectedInterview.notice_content }}</p>
      </div>
    </div>
  </div>
</div>

showmodal method:

selectedInterview: any;
showModal(interviewObj) {
this.selectedInterview = interviewObj;
}

Answer 1

This is not Angular issue, its CSS problem. Try to give the parent div some width. If you could share your code then it will be easier to solve the problem.