TransWikia.com

How to set scrollbars to only part of the modal?

Stack Overflow Asked by Gowthamss on December 9, 2021

I have a modal with some input elements and buttons at the top and bottom and have grid in the middle of the modal. And the grid’s height is lets say 400px (before expanding the contents of the grid). If I expand the grid that content will go beyond 400px. So I want to add a scrollbar to it so that only when it exceeds 400px, it should have vertical scrollbar. But I want elements at the top of the modal(buttons and other elements) still visible while I scroll the grid. How can I apply it.

This is what I tried:

.table1 {
  height: 400px;
}

.table2 {
  height: 400px;
  overflow: auto;
}
<table class="table1">
  <tr></tr>
  <tr></tr>
</table>

<table class="table1">
  <tr></tr>
  <tr></tr>
</table>

So, in this scenario I have more elements in the table2 which exceeds its set height. So I want to apply scrollbar when it exceeds 400px. But when I do that it is overlapping with the table1. I want to avoid it.I want table2 to have scrolling in its position.

csshtml

2 Answers

With a combo of max-height: 400px; and overflow-y: scroll; on a wrapper div, you can achieve that.

See here:

const table = document.getElementById("table1");

function extendTable() {
  var row = table.insertRow();
  row.insertCell(0).innerHTML = "NEW";
  row.insertCell(1).innerHTML = "NEW";
  row.insertCell(2).innerHTML = "NEW";
}
body {
  background-color: grey
}

.modal {
  max-width: 30rem;
  padding: 1rem;
  background-color: white;
  border-radius: 10px
}

.scroll-wrapper {
  margin: 1rem 0;
  max-height: 400px;
  overflow-y: scroll;
}

th,
td {
  border: 1px solid grey;
}
<body>

  <div class="modal">

    <button onClick="extendTable()">Click to extend</button>

    <div class="scroll-wrapper">
      <table id="table1">
        <th>Column1</th>
        <th>Column2</th>
        <th>Column3</th>

        <tr>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
        </tr>
        <tr>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
        </tr>
      </table>
    </div>
    More info at the bottom of the table

  </div>
</body>

Answered by Luke Storry on December 9, 2021

Change the grid's height to use max-height instead. It's probably worth setting a min-height as well so the content doesn't collapse. It's normal practice to only set the vertical overflow to scroll if you don't want any horizontal scrolling as well.

.middle{
    min-height: 200px;
    max-height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
}

Answered by sidonaldson on December 9, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP