Question

I’ve run into a bit of a problem with a webpage I’m developing. Here’s the general structure of the page I’m having trouble with for a bit of background:

• There is a form where the user selects from four checkboxes and a dropdown menu. When at least one checkbox has been selected and the dropdown menu has been chosen from, I use jQuery to generate a “popup window,” which is really just an iframe that I had set to be hidden initially but then becomes visible once the input is valid. This all works just fine.
• Within the iframe, I have an interactive table whose rows are dynamically determined by the user’s form input. This is the table I’m having a problem with.

I want the table to have a “maximum height,” so to speak. In other words, I want the table’s rows to print out normally until the total height of the table reaches a certain point. At that point, I want the table to become scrollable, if you will, much in the same way that a textarea becomes scrollable when enough text has been put into it (its overall height doesn’t change but you can scroll through it).

I am open to any suggestions as long as they only involve HTML, CSS, PHP, JavaScript, and/or jQuery. If you need any clarifications, don’t hesitate to ask–it wasn’t too easy to put all this into words so I would understand if I wasn’t clear enough.

Answer 1

In your CSS, apply height: YOUR_MAX_HEIGHT and overflow-y: scroll to your table. This should be a good start to what you are trying to achieve.