Hey there, I'm currently working on an Angular component and using Bootstrap tables in my component view. However, I've noticed that sometimes when I resize my webpage, two scroll bars appear. How can I prevent the inner scroll bar from showing?
https://i.sstatic.net/ZBQJ2.png
This is the SCSS file for my component:
@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: 2px;
}
.search-msisdn {
background-color: $pc-search-bg-color;
border-radius: 18px;
}
This is the HTML page for the component:
<pc-header [heading]="'HEADINGS.MESSAGE_HISTORY_REPORTING' | translate" icon="history">
</pc-header>
<form novalidate [formGroup]="formGroup" (ngSubmit)="handleSubmit(formGroup.value)">
<!-- Form fields go here -->
</form>
<div class="table-responsive">
<table class="table table-hover">
<!-- Table content goes here -->
</table>
</div>
<pagination-controls (pageChange)="pageChanged($event, formGroup.value)" ></pagination-controls>
The tables are rendered using Bootstrap styles like "table-responsive," "table," and "table-hover." If anyone has any suggestions on how to resolve this issue, I would greatly appreciate it. I am new to CSS3 and struggling to find a solution.
Thank you for any assistance!