How to prevent a vertical scroll bar in my angular component view?

Question

Hi I am having an angular component . i am using bootstrap tables in my component view . However i can see sometimes when i resize my webpage it show two scroll bars . How can i prevent the inner scroll bar .

this is my component scss file

@import './../../../scss/mixins';
@import './../../../scss/variables';

label {
  @include pc-form-label;
}

.required::after {
  @include pc-required-asterisk;
}


.form-control {
    min-height: $min-form-input-height;
}

.search-form-background {
  background-color: $pc-search-bg-color;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding-top: 2px;
  padding-right: 2px;
  padding-bottom: 2px;
  padding-left: 2px;
}

.search-msisdn {
    background-color: $pc-search-bg-color;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    background-color: #cccccc;
    border-radius: 18px;
  }

this is component html page

<pc-header [heading]="'HEADINGS.MESSAGE_HISTORY_REPORTING' | translate" icon="history">

  </pc-header>
  <form novalidate [formGroup]="formGroup" (ngSubmit)="handleSubmit(formGroup.value)"> 

    <div class="row">

      <div class="col-3">
        <pc-form-field>
          <pc-date-picker [range]="true" formControlName="range" [placeholder]="'LABELS.DATE_RANGE' | translate"></pc-date-picker>
        </pc-form-field>
      </div>

      <div class="col-2">
          <select class="custom-select" formControlName="cdrStatus">
            <option [value]="" disabled>{{ 'LABELS.CDR_STATUS' | translate }}</option>
            <option *ngFor="let key of cdrStatusKeys" [value]="key"> {{ cdrStatuses[key] }} </option>
          </select>
      </div>

      <div class="col-2">
          <pc-form-field>
          <input formControlName="msisdn" type="text" placeholder="{{ 'PLACEHOLDERS.MSISDN' | translate }}">
          </pc-form-field>
        </div>

      <div class="col-3">
          <select class="custom-select" *ngIf="isGlobalAdmin" formControlName="account">
              <option [value]="null" disabled>{{ 'PLACEHOLDERS.ACCOUNT_NAME' | translate }}</option>
              <option *ngFor="let account of accounts" [value]="key"> {{ account.name }} </option>
            </select>
      </div>

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

    <div class="row">
        <div class="col-4">
            <pc-form-field>
            <select formControlName="campaign">
                <option value="" disabled> {{ 'PLACEHOLDERS.SELECT_CAMPAIGNS' | translate }}  </option>
                <option *ngFor="let campaign of campaigns" [ngValue]="campaign.id">
                  {{ campaign.name }}
                </option>
              </select>
            </pc-form-field>
        </div>
        <div class="col-2">
            <pc-form-field>
            <select formControlName="inventory"> 
                <option value="null" disabled> {{ 'PLACEHOLDERS.SELECT_INVENTORIES' | translate }} </option>
                <option *ngFor="let inventory of inventories" [ngValue]="inventory">
                  {{ inventory.label }}
                </option>
              </select>
            </pc-form-field>
        </div>

        <div class="col-4">
            <pc-form-field>
            <select formControlName="flight">
                <option value="null" disabled> {{ 'PLACEHOLDERS.SELECT_FLIGHTS' | translate }} </option>
                <option *ngFor="let flight of flights" [ngValue]="flight"> {{ flight.name }}
                </option>
              </select>
            </pc-form-field>
        </div>

        <div class="col-2 text-right">
            <pc-button theme="primary"  (click)="generateCSV(formGroup.value)">
                <i class="fas fa-download mr-2"></i>
                {{ 'ACTIONS.CSV' | translate }}
            </pc-button>
          </div>
    </div>

 </form> 

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

<div class="table-responsive">
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">Time</th>
        <th scope="col">To</th>
        <th scope="col">From</th>
        <th scope="col">Campaign</th>
        <th scope="col">Flight</th>
        <th scope="col">Status</th>
        <th scope="col">Error Code</th>
        <th scope="col">Message Text</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of messageHistories | paginate: { itemsPerPage: 10, currentPage: pageNumber, totalItems: totalHits }">
        <td> {{ item['@timestamp'] }} </td>
        <td> {{ item['recipient'] }} </td>
        <td>{{ item['sender'] }} </td>
        <td>{{ item['campaign_name'] }} </td>
        <td>{{ item['flight_name'] }} </td>
        <td>{{ item['status'] }}  </td>
        <td>{{ item['o_error'] }} </td>
        <td>{{ item['msg_text'] }}</td>
      </tr>
     </tbody>
     </table>
  </div>   


<pagination-controls (pageChange)="pageChanged($event, formGroup.value)" ></pagination-controls>

the tables are rendered using bootstrap styles table-responsive, table and table-hover . what should i do to fix this issue . I am very much new to css3 and cant figure it out anything

really appreciate any help thank you

Answer 1

I can't get your output from your code. But, I am guessing that You gives a fixed hight to 'Message History Reporting' Block. And that block's code or somewhere other you give CSS code that overflow-y: scroll; that applies on this block.

If that happens then try to give CSS,

height:auto;

If that doesn't work then check that div CSS from, 'Developer tools' and check from where the code i.e overflow-y: scroll; is apply to the div or that block, and then remove that code or replace the code with overflow-y: hidden; According to your website condition.

Answer 2

have you tried:

.table-responsive{
overflow-y: hidden;
}

this should disable the vertical scroll bar