Карта перекрывается Angular mydatepicker селектор - PullRequest
Новая
       28

Карта перекрывается Angular mydatepicker селектор

0 голосов
/ 06 апреля 2020

введите описание изображения здесь Я интегрировал Bootstrap, Jquery с Angular 9. Я использовал jquery таблицу данных, Angular Mydatepicker, Angular Выбор и Bootstrap Карта , Карта перекрывается, выберите выпадающий список и селектор даты. Я использовал Bootstrap 4 и Angular 9. Это проблема css или Angular? Я не добавил ни одного пользовательского css класса в свой компонент. 

<div class="row">

  <div class="col-sm-3 animated fadeInLeft">
    <div class="form-group">
      <b>Clear {{account.name}} - a/c Entries</b>
      <a href="javascript:void(0);" (click)="clearAccount()" class="btn btn-primary form-control">Clear {{account.name}}
        - a/c Entries</a>
    </div>
  </div>

  <div class="col-sm-3 animated fadeInUpBig">
    <div class="form-group">
      <b>Day Book</b>
      <a href="javascript:void(0);" routerLink="/daybook/daybook" class="btn btn-primary form-control">Goto daybook</a>
    </div>
  </div>

  <div class="col-sm-3 animated fadeInDownBig">
    <div class="form-group">
      <b>Select Account</b>
      <ng-select placeholder="Select a Account" [(ngModel)]="account.accountId" (change)="onAccountSelected($event)"
        [items]="accounts" bindLabel="name" bindValue="accountId">
      </ng-select>
    </div>
  </div>

  <div class="col-sm-3 animated fadeInRight">
    <div class="form-group">
      <b>From Date - To Date</b>
      <div class="input-group">
        <input class="form-control" name="mydate" placeholder="Select a date" angular-mydatepicker
          #dp2="angular-mydatepicker" [(ngModel)]="fromToDateObject" [options]="dateOptions"
          (dateChanged)="onFromToDateChanged($event)" />

        <span class="input-group-btn">
          <button type="button" class="btn btn-primary" (click)="dp2.clearDate()">
            <i class="far fa-window-close"></i>
          </button>
          <button type="button" class="btn btn-primary" (click)="dp2.toggleCalendar()">
            <i class="fas fa-calendar"></i>
          </button>
        </span>

      </div>
    </div>
  </div>

</div>


<div class="row" [hidden]="tableHidden">
  <div class="col-sm-12">
    <div class="card  m-4 shadow-lg p-4 mb-4 bg-light animated bounce">
      <div class="card-body">
        <div class="table-responsive">
          <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover" id="myTable">
            <thead>
              <tr>
                <th width="5%">sno</th>
                <th width="15%">Date</th>
                <th>Description</th>
                <th width="15%">Debit</th>
                <th width="15%">Credit</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let book of daybooks; let i = index">
                <td width="5%" id="{{i+1}}sno">{{i+1}}</td>
                <td width="15%">{{book.date | date :'dd-MMM-yyyy'}}</td>
                <td>{{book.description}}</td>
                <td width="15%" class="text-right">{{book.credit}}</td>
                <td width="15%" class="text-right">{{book.debit}}</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <th></th>
                <th></th>
                <th class="text-right">Total</th>
                <th class="text-right">{{this.debitTotal | currency:'INR'}}</th>
                <th class="text-right">{{this.creditTotal | currency:'INR'}}</th>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
...