Two scrollbars on a page

Martin

I have a problem wtih two scroolbars on webpage which does same length, backlog table is longer than this on right but when a set custom css class .table-responsive {
height: 100%;
overflow-y: scroll;
}. I am using bootstrap 5.3. I want have vertical scrollbar for backlog table and the short vertical scrollbar for table employee. Backlog table is ViewComponent. I am using Asp-Net.Core MVC.

This part of web page on right backlog table like partial wie and everything other is normal view

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Deepak Rawat3y ago
vertical scrollbar for only the backlog table and a short vertical scrollbar for the employee table, you can use the CSS overflow-y: auto property for the employee table and overflow-y: scroll property for the backlog table.

Here's an example of how you can achieve this:
```
  
    
  



  
```
```
.table-responsive {
  height: 100%;
  overflow-x: hidden;
}

.employee-table {
  overflow-y: auto;
  max-height: 200px; /* adjust this value as per your needs */
}

.backlog-table {
  height: 100%;
  overflow-y: scroll;
}
```
n this example, we have added a CSS class .employee-table to the employee table and set its overflow-y property to auto. We have also added a max-height property to limit the height of the employee table and show a short vertical scrollbar if needed.

For the backlog table, we have added a CSS class .backlog-table and set its overflow-y property to scroll. This will add a long vertical scrollbar to the backlog table.

Make sure to adjust the max-height value of the employee table based on your content and screen size. You can also adjust other CSS properties as per your needs.
Tuhin Paul3y ago
Add this in your css class:
```
.table-responsive {
  height: 100%;
  overflow-y: auto;
}

.table-responsive-backlog {
  height: calc(100% - 16px);
  overflow-y: scroll;
}
```
add the class table-responsive-backlog to the container of your backlog table, and add the class table-responsive to the container of your employee table. This will set the height of the backlog table container to be 100% of the parent container minus 16px for the height of the employee table container's scrollbar, and set the overflow-y property to scroll.