Issue persists with `overflow:auto` even when height is defined

Question

Issue persists with `overflow:auto` even when height is defined

As I was creating a website, I designed an exception holder on the side to capture every error thrown.

To prevent the webpage from expanding endlessly in case of multiple errors, I am working on making it scroll instead.

My approach involves using CSS and adjusting the #error element with the property overflow:auto.

Check out the website here!

#error {
  color:red;
  display:table;
  border:1px solid black;
  border-color:black;
  height:750px;
  width:10em;
  overflow:auto;
  white-space:nowrap;
}
#important{
  vertical-align:top;
  border-collapse:separate;
}

<table>
  <tr>
    <td id='error'>
      <div>
        <center>Errors:</center>
      </div>
    </td>
    <td id='important'>
      Everything listed here is crucial. Please be patient as we load.
    </td>
  </tr>
</table>

javascript html css

Answer 1

Answer №1

To resolve the issue, you should eliminate display:table; from the styling of #error and transfer the id='error' to a nested div. This adjustment will effectively solve the problem.

#error {
  color: red;
  border: 1px solid black;
  border-color: black;
  height: 10px;
  width: 10em;
  overflow: auto;
  white-space: nowrap;
}
#important {
  vertical-align: top;
  border-collapse: separate;
}

<table>
  <tr>
    <td>
      <div id='error'>
        <center>
          Errors:
          <br/><br/><br/><br/>
          AAA
        </center>
      </div>
    </td>
    <td id='important'>
      Everything here is important. Everything. Please wait while we load.
    </td>
  </tr>
</table>

Answer 2

To resolve the issue, you should eliminate display:table; from the styling of #error and transfer the id='error' to a nested div. This adjustment will effectively solve the problem.

#error {
  color: red;
  border: 1px solid black;
  border-color: black;
  height: 10px;
  width: 10em;
  overflow: auto;
  white-space: nowrap;
}
#important {
  vertical-align: top;
  border-collapse: separate;
}

<table>
  <tr>
    <td>
      <div id='error'>
        <center>
          Errors:
          <br/><br/><br/><br/>
          AAA
        </center>
      </div>
    </td>
    <td id='important'>
      Everything here is important. Everything. Please wait while we load.
    </td>
  </tr>
</table>

Issue persists with `overflow:auto` even when height is defined

Answer №1

Similar questions

Tips for creating space between flex elements in Bootstrap without disrupting the layout breakpoints

Controlling the file system on a local level through browser-based JavaScript and Node.js

Angular JS - Selecting Directives on the Fly

Retrieve Content from a Different Web Page Using Ajax

Another class is overriding the border of the text-box

Error with Husky during precommit:

Is it possible for React and React Router to render the same element twice with different props, creating two elements with identical props?

Utilizing the datepicker options function within a different function

Numerous database deletions, but only one linked to a cloud function

A TypeError is thrown when attempting to use window[functionName] as a function

What steps can be taken to further personalize this pre-existing jQuery sorting solution?

What do you notice about interactions involving 'input type=text' in HTML and JavaScript?

What is the best way to create an optional object parameter in Typescript?

Incorporating D3.js into Angular 6 for interactive click events

Upon retrieving the Firebase storage link, the page automatically refreshes

Hiding Button in code behind

No departure animation employed - Polymer

Displaying the state in NextJS rather than revealing server error messages

ES6 Promises have a curious ability to accurately retrieve values from custom JavaScript objects

How can I distinguish the search results from the while loop section at the bottom of the page?