Как исправить прокрутку за пределами страницы?

ProgramBox

Как исправить прокрутку за пределами страницы?

Post author:admin
Запись опубликована:10 января, 2022
Post category:Вопросы по программированию

#html

Вопрос:

У меня есть страница, и я могу прокручивать ее дальше. Я могу видеть белую полоску . Я использую bootstrap для таблиц. и angular это проект angular 2.

есть идеи, почему это происходит ?

в проекте angular используется глобальный css.

 html,
body {
  height: 100%;
  max-width: 100%;
}

body {
  font-family: 'Lato', sans-serif;
  font-size: $font-size-base;
  color: $pc-base-font-color;
}

[hidden] {
  display: none !important;
}

.form-group {
  display: block;
}

a {
  @include themify-global() {
    color: themed('primary');

    @include hover {
      color: darken(themed('primary'), 15%);
    }
  }
}

.text-brand-secondary {
  @include themify-global() {
    color: themed('brand-secondary');
  }
}

// ngx-bootstrap tooltip placement bug
.tooltip {
  pointer-events: none;
}

.bs-tooltip-top,
.bs-tooltip-bottom {
  .arrow::before {
    margin-left: -($tooltip-arrow-width / 2);
  }
}

.bs-tooltip-left,
.bs-tooltip-right {
  .arrow::before {
    margin-top: -($tooltip-arrow-width / 2);
  }
}

.bs-popover-top .arrow,
.bs-popover-bottom .arrow {
  margin-left: -($popover-arrow-width / 2);
}
.bs-popover-left .arrow,
.bs-popover-right .arrow {
  margin-top: -($popover-arrow-width / 2);
}

// Fix to set proper position of account popover and its arrow.
// For now ngx-bootstrap popover doesn't provide solution.
.pc-account-popover-position-fix {
  @include pc-dropshadow;
  margin-left: 44px;

  .arrow {
    left: 1.5em !important;
  }
}

.pc-calendar-flights-popover-fix {
  @include pc-dropshadow;
  width: 100%;
  max-width: $pc-calendar-popup-max-width;
  max-height: $pc-calendar-popup-max-height;
  overflow-y: auto;

  .popover-arrow {
    display: none;
  }

  .popover-body {
    overflow-x: auto;
  }
}

.input-group > .input-group-append:not(:last-child) > .input-group-text {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.input-group-append {
  margin-left: -2px;
}

файл компонента html находится ниже
user-activities.component.html

 <pc-header [heading]="'HEADINGS.USER_ACTIVITIES' | translate" icon="eye"></pc-header>

<form novalidate [formGroup]="formGroup" (ngSubmit)="handleSubmit(formGroup.value)">


  <div class="row" *ngIf="isGlobalAdmin; else showAccountAdmin">

    <div class="col-2"> 
      <pc-form-field [required]="true" [errorMessages]="['required']">
        <pc-date-picker [range]="true" [minDate]="minStartDate" [maxDate]="maxEndDate" 
          formControlName="range" [placeholder]="'LABELS.DATE_RANGE' | translate">
        </pc-date-picker>
      </pc-form-field>
    </div>

    <div class="col-2">
      <pc-form-field [required]="true">
        <select class="custom-select" formControlName="account">
          <option [ngValue]="null" disabled>{{
              'PLACEHOLDERS.ACCOUNT_NAME' | translate
            }}</option>
          <option *ngFor="let account of accounts" [ngValue]="account">
            {{ account.name }}
          </option>
        </select>
      </pc-form-field>
    </div>

    <div class="col-2">
      <pc-form-field>
        <select class="custom-select" formControlName="createdBy">
          <option [ngValue]="null" disabled>{{
              'PLACEHOLDERS.SELECT_USER' | translate
            }}</option>
          <option *ngFor="let user of users" [ngValue]="user">
            {{ user.name }}
          </option>
        </select>
      </pc-form-field>
    </div>

    <div class="col-2">
      <pc-form-field>
        <pc-multiselect formControlName="activity" [placeholder]="'PLACEHOLDERS.ALL' | translate">
          <pc-multiselect-option *ngFor="let activity of activities" [value]="activity"
            [label]="'PLACEHOLDERS.USER_ACTIVITIES.'   activity| translate"></pc-multiselect-option>
        </pc-multiselect>
      </pc-form-field>
    </div>

    <div class="col-1">
      <pc-button theme="primary" type="submit" [disabled]="formGroup.invalid">
        {{ 'ACTIONS.SUBMIT' | translate }}
      </pc-button>
    </div>

    <div class="col-1">
      <!-- 
      <pc-button theme="primary" icon="download" [disabled]="formGroup.invalid"
        (click)="handleCsvDownload(formGroup.value)">
        {{ 'ACTIONS.CSV' | translate }}
      </pc-button>
      -->

    </div>

    <div class="col-*">
    </div>

  </div>


  <ng-template #showAccountAdmin>

    <div class="row">

      <div class="col-2">
        <pc-form-field [required]="true" [errorMessages]="['required']">
          <pc-date-picker [range]="true" [minDate]="minStartDate" [maxDate]="maxEndDate"
             formControlName="range" [placeholder]="'LABELS.DATE_RANGE' | translate">
          </pc-date-picker>
        </pc-form-field>
      </div>

      <div class="col-2">
        <pc-form-field [required]="true">
          <select class="custom-select" formControlName="createdBy">
            <option [ngValue]="null" disabled>{{
            'PLACEHOLDERS.SELECT_USER' | translate
          }}</option>
            <option *ngFor="let user of users" [ngValue]="user">
              {{ user.name }}
            </option>
          </select>
        </pc-form-field>
      </div>

      <div class="col-2">
        <pc-form-field>
          <pc-multiselect formControlName="activity" [placeholder]="'PLACEHOLDERS.ALL' | translate">
            <pc-multiselect-option *ngFor="let activity of activities" [value]="activity"
              [label]="'PLACEHOLDERS.USER_ACTIVITIES.'   activity| translate"></pc-multiselect-option>
          </pc-multiselect>
        </pc-form-field>
      </div>

      <div class="col-2">

      </div>

      <div class="col-1">
        <pc-button theme="primary" type="submit" [disabled]="formGroup.invalid">
          {{ 'ACTIONS.SUBMIT' | translate }}
        </pc-button>
      </div>

      <div class="col-1">
        <!-- 
        <pc-button theme="primary" icon="download" [disabled]="formGroup.invalid"
          (click)="handleCsvDownload(formGroup.value)">
          {{ 'ACTIONS.CSV' | translate }}
        </pc-button>
        -->

      </div>
      <div class="col-*">
      </div>
    </div>

  </ng-template>

  <pc-spinner [standalone]="true" *ngIf="isLoading"></pc-spinner>


  <div class="row row-style row-header-border-top">

    <div class="col-2 header-cell">
      {{ 'LABELS.AUDIT.USER_ACTIVITIES.TIME' | translate | uppercase }}
    </div>

    <div class="col-2 header-cell">
      {{ 'LABELS.AUDIT.USER_ACTIVITIES.FIRST_NAME' | translate | uppercase }}
    </div>

    <div class="col-2 header-cell">
      {{ 'LABELS.AUDIT.USER_ACTIVITIES.LAST_NAME' | translate | uppercase }}
    </div>

    <div class="col-2 header-cell">
      {{ 'LABELS.AUDIT.USER_ACTIVITIES.ACTION' | translate | uppercase }}
    </div>

    <div class="col-* header-cell">
      {{ 'LABELS.AUDIT.USER_ACTIVITIES.DETAILS' | translate | uppercase }}
    </div>

  </div>

 
  <ng-container *ngIf="result amp;amp; result.length > 0">

    <div class="container">
      
    <div class="row row-style"
      *ngFor="let item of result | paginate: { itemsPerPage: pageSize, currentPage: pageNumber, totalItems: totalItemsCount }">

      <div class="col-2 row-cell">
        {{ item['createdOn'] | date: 'medium' }}
      </div>

      <div class="col-2 row-cell">
        {{ item['firstName'] }}
      </div>

      <div class="col-2 row-cell">
        {{ item['lastName'] }}
      </div>

      <div class="col-2 row-cell">

        {{ 'LABELS.AUDIT.ACTION.'   item['type'] | translate }}

      </div>

      <div class="col-* row-cell">
        <ng-container [ngSwitch]="item['action']">

          <ng-container *ngSwitchCase="'CAMPAIGN'">
            <ng-container [ngSwitch]="item['type']">

              <ng-container *ngSwitchCase="'CAMPAIGN_CREATED'">                
                {{ 'LABELS.AUDIT.CAMPAIGN.CREATED' | translate: { campaignName : item['auditData']['CAMPAIGN_NAME'] }  }}
              </ng-container>

              <ng-container *ngSwitchCase="'CAMPAIGN_UPDATED'">
                {{ 'LABELS.AUDIT.CAMPAIGN.UPDATED' | translate: { campaignName : item['auditData']['CAMPAIGN_NAME']  } }}
              </ng-container>

              <ng-container *ngSwitchCase="'CAMPAIGN_APPROVED'">
                {{ 'LABELS.AUDIT.CAMPAIGN.APPROVED' | translate: { campaignName : item['auditData']['CAMPAIGN_NAME']}  }}
              </ng-container>

              <ng-container *ngSwitchCase="'CAMPAIGN_DECLINED'">
                {{ 'LABELS.AUDIT.CAMPAIGN.DECLINED' | translate: { campaignName : item['auditData']['CAMPAIGN_NAME']}   }}
              </ng-container>

            </ng-container>
          </ng-container>

          <ng-container *ngSwitchCase="'FLIGHT'">
            <ng-container [ngSwitch]="item['type']">
            
              <ng-container *ngSwitchCase="'FLIGHT_CREATED'">  
                {{ 'LABELS.AUDIT.FLIGHT.CREATED' | translate: { campaignName : item['auditData']['CAMPAIGN_NAME'], flightName:  item['auditData']['FLIGHT_NAME'] }  }}
              </ng-container>

              <ng-container *ngSwitchCase="'FLIGHT_CAMPAIGN_MGR_DECLINED'"> 
                {{ 'LABELS.AUDIT.FLIGHT.FLIGHT_CAMPAIGN_MGR_DECLINED' | translate: { campaignName : item['auditData']['CAMPAIGN_NAME'], flightName:  item['auditData']['FLIGHT_NAME'] }  }}
              </ng-container>

              <ng-container *ngSwitchCase="'FLIGHT_CAMPAIGN_MGR_APPROVED'">
                {{ 'LABELS.AUDIT.FLIGHT.FLIGHT_CAMPAIGN_MGR_APPROVED' | translate: { campaignName : item['auditData']['CAMPAIGN_NAME'], flightName:  item['auditData']['FLIGHT_NAME'] }  }}
              </ng-container>

              <ng-container *ngSwitchCase="'FLIGHT_PAUSED'">  
                {{ 'LABELS.AUDIT.FLIGHT.FLIGHT_PAUSED' | translate: { campaignName : item['auditData']['CAMPAIGN_NAME'], flightName:  item['auditData']['FLIGHT_NAME'] }  }}
              </ng-container>

              <ng-container *ngSwitchCase="'FLIGHT_STOPPED'">  
                {{ 'LABELS.AUDIT.FLIGHT.FLIGHT_STOPPED' | translate: { campaignName : item['auditData']['CAMPAIGN_NAME'], flightName:  item['auditData']['FLIGHT_NAME'] }  }}
              </ng-container>

              <ng-container *ngSwitchCase="'FLIGHT_RESUMED'"> 
                {{ 'LABELS.AUDIT.FLIGHT.FLIGHT_RESUMED' | translate: { campaignName : item['auditData']['CAMPAIGN_NAME'], flightName:  item['auditData']['FLIGHT_NAME'] }  }}
              </ng-container>

              <ng-container *ngSwitchCase="'FLIGHT_SUBMITTED_CAMPAIGN_MGR_APPROVAL'"> 
                {{ 'LABELS.AUDIT.FLIGHT.FLIGHT_SUBMITTED_CAMPAIGN_MGR_APPROVAL' | translate: { campaignName : item['auditData']['CAMPAIGN_NAME'], flightName:  item['auditData']['FLIGHT_NAME'] }  }}
              </ng-container>

            </ng-container>
          </ng-container>

          <ng-container *ngSwitchCase="'REPORTING'">

            <ng-container [ngSwitch]="item['type']">

              <ng-container *ngSwitchCase="'MESSAGE_HISTORY_SEARCH'">  
                {{ 'LABELS.AUDIT.REPORTING.MESSAGE_HISTORY_SEARCH_PERFORMED' | translate : { searchQuery:  item['auditData']['queryParams'] } }}
              </ng-container>

              <ng-container *ngSwitchCase="'MESSAGE_HISTORY_CSV_DOWNLOAD'">  
                {{ 'LABELS.AUDIT.REPORTING.MESSAGE_HISTORY_CSV_DOWNLOAD_PERFORMED' | translate : { searchQuery:  item['auditData']['queryParams']  } }}
              </ng-container>
            </ng-container>

          </ng-container>

        </ng-container>
      </div>
    </div>



    <div class="row">
      
      <div class="col-1 row-cell">
        <select class="custom-select custom-select-sm page-size-select" (change)="pageSizeChanged($event.target.value)">
          <option *ngFor="let size of pageSizes" [ngValue]="pageSize"> {{ size }} </option>
        </select>
      </div>

      <div class="col-* row-cell">
        <p class="float-right">
          <pagination-controls class="my-pagination" previousLabel="Previous" nextLabel="Next"
            (pageChange)="pageChanged($event)"></pagination-controls>
        </p>

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

  </ng-container>

</form>

the html user-activities.component.scss file is below

 .header-cell {
    background-color: transparent;
    border: 0;
    padding-bottom: 10px;
    padding-top: 10px;
    outline: 0;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    flex: 1;
    align-items: center;
  }

  .row-style {
    border-bottom: 1px solid #ccc;
    padding: 5px;
  }
  
  .row-header-border-top {
    border-top: 1px solid #ccc;
  }

  .row-cell {
    flex: 1;
    align-items: center;
    overflow: hidden;
    word-wrap: break-word;
  }


.my-pagination /deep/ .ngx-pagination .current {
    @include themify() {
      background: themed('primary');
      border-radius: 50%;
    }
  }
  
  .my-pagination /deep/ .ngx-pagination a,
  button {
    border-radius: 50%;
  }

  .my-pagination /deep/ .ngx-pagination .ul {
    float: right;
  }  

  .page-size-select {
    width: 50%;
    margin-left: 10px;
  }

буду признателен за любую помощь

при дальнейшей отладке я могу наблюдать это. Я вижу, что это вызвано следующим стилем. есть какие-нибудь подсказки или предложения?

 .sidebar-content[_ngcontent-c3] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: auto;
    height: 100%;
    padding: 0px 16px 8px 16px;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

Вопрос:

Комментарии:

Вам также может понравиться

Ограничение зарезервированного экземпляра для EC2 и RDS

Есть ли выпадающее меню для события расширения?

Программа Guess the number на Python — после ввода, сколько раз я хочу сыграть, игра не работает