Is there a way to get a div to scroll its content inside another div with a max-height of (px)? I've tried setting the height in percentage but the scroll doesn't seem to work

<div style="max-height:450px; overflow: auto;">
                    <table  id="improvementTbl" class="table table-hover table-bordered table-striped nowrap" cellpadding="0" cellspacing="0">
                    <tbody class="scrollit">
                            <tr ng-repeat="data in roceImprovementList" ng-style="{'font-weight': ($first?'bold':'')}">
                                <td  width="9%"  class="tooltip-enable-mandatory" data-toggle="tooltip" data-container="#bridgeChartPopup"  title="{{data.particulars}}" data-placement="bottom"  onmouseenter="tooltipEnterEvent($(this))" onmouseleave="tooltipLeaveEvent($(this))">{{data.particulars}}</td>
                                <td  width="9%"  class="table-text-right tooltip-enable-mandatory" data-toggle="tooltip" data-container="#bridgeChartPopup"  title="{{data.calcBud}}" data-placement="bottom"  onmouseenter="tooltipEnterEvent($(this))" onmouseleave="tooltipLeaveEvent($(this))">{{data.CALC_BUDGET}}</td>
                                <td  width="9%" class="table-text-right tooltip-enable-mandatory" data-toggle="tooltip" data-container="#bridgeChartPopup"  title="{{data.perSaleBud}}" data-placement="bottom"  onmouseenter="tooltipEnterEvent($(this))" onmouseleave="tooltipLeaveEvent($(this))">{{data.PERC_TO_SALE_BUDGET}}</td>
                                <td  width="9%" class="table-text-right tooltip-enable-mandatory" data-toggle="tooltip" data-container="#bridgeChartPopup"  title="{{data.actMovPer}}" data-placement="bottom" onmouseenter="tooltipEnterEvent($(this))" onmouseleave="tooltipLeaveEvent($(this))">{{data.ACTUAL_MOVEMNT_PERC_BUDGET}}</td>
                                <td  width="9%" class="table-text-right tooltip-enable-mandatory" data-toggle="tooltip" data-container="#bridgeChartPopup"  title="{{data.calcAct}}" data-placement="bottom"  onmouseenter="tooltipEnterEvent($(this))" onmouseleave="tooltipLeaveEvent($(this))">{{data.CALC_ACTUAL}}</td>
                                <td  width="9%" class="table-text-right tooltip-enable-mandatory" data-toggle="tooltip" data-container="#bridgeChartPopup"  title="{{data.saleAct}}" data-placement="bottom"  onmouseenter="tooltipEnterEvent($(this))" onmouseleave="tooltipLeaveEvent($(this))">{{data.PERC_TO_SALE_ACTUAL}}</td>
                                <td  width="9%" class="table-text-right tooltip-enable-mandatory" data-toggle="tooltip" data-container="#bridgeChartPopup"  title="{{data.actMov}}" data-placement="bottom"  onmouseenter="tooltipEnterEvent($(this))" onmouseleave="tooltipLeaveEvent($(this))">{{data.MOVEMENT_ACTUAL}}</td>
                                <td  width="9%" class="table-text-right tooltip-enable-mandatory" data-toggle="tooltip" data-container="#bridgeChartPopup"  title="{{data.roceMov}}" data-placement="bottom"  onmouseenter="tooltipEnterEvent($(this))" onmouseleave="tooltipLeaveEvent($(this))">{{data.ROCE_MOVEMENT}}</td>
                                <td  width="9%" class="table-text-right tooltip-enable-mandatory" data-toggle="tooltip" data-container="#bridgeChartPopup"  title="{{data.roce}}" data-placement="bottom"  onmouseenter="tooltipEnterEvent($(this))" onmouseleave="tooltipLeaveEvent($(this))">{{data.ROCE}}</td>
                                <td   ng-show="showColumn?true:isSingleUnitCompany?true:false" ><input placeholder="Enter comments here..." style="width: 100%; padding:3px;" id="commentTextImprovement" ng-change="inputComment(data, 'commentTextImprovement', $index)" ng-model="values[$index]" type="text"></input></td>
                            </tr>
                            <tr ng-if="redReportList.length==0">
                                <td colspan="8" class="text-center">No record found.</td>
                            </tr>
                        </tbody>
                    </table>
                    </div>
htmlcss

Answer №1

To establish a percentage height, the parent container(*) should possess a specific height. Alternatively, all contemporary web browsers along with IE>=9 back up fresh CSS units that are relative to viewport height (vh) and viewport width (vw). This allows for better responsiveness in webpage layout designs:

.div{
height: 90vh;
overflow-y: auto;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refreshing Dropotron Data with jQuery

I'm struggling to find a solution for refreshing the <ul> and <li> elements after the page has already loaded. My <li> element is updated with Ajax data, but despite using jQuery to manipulate the DOM, the changes are not reflected ...

javascriptjqueryhtmlajaxdrop-down-menu

Buttons within the Bootstrap carousel caption cannot be clicked

I am currently designing a webpage with a Bootstrap carousel that includes a paragraph caption and two buttons. However, the buttons are not functioning as clickable links - when clicked, nothing happens. {% block body %} <div id ="car-container"> ...

javascripthtmljquerycsstwitter-bootstrap

What is the method for displaying HTML newlines in PHP?

Within a <textarea>, I input multiple numbers on separate lines by pressing enter. When I submit the form, these numbers are received on the server side as 'X'. However, when I echo 'X' to the browser, the numbers are separated by ...

javascriptphphtmlweb

Automatically refresh and update HTML content

I've created a temp.php file that generates output in JSON format: [{"Date":"2016-10-25 16:12:30","Temp":"1.00"},{"Date":"2016-10-25 16:24:05","Temp":"1.00"},{"Date":"2017-02-25 23:04:04","Temp":"1.00"},{"Date":"2017-02-25 23:05:34","Temp":"1.00"},{" ...

phphtmlajax

Using CSS to style HTML elements with spaces

Apologies if this question can easily be answered with a Google search, but I am having trouble finding the right keywords to use. While I have a decent grasp of CSS, I feel like there is still much more potential to explore and improve my code efficiency. ...

htmlcss

Using Python and Selenium to retrieve information from the attribute 'data-label'

https://i.stack.imgur.com/zb7f5.jpg try: details = WebDriverWait(driver, 10).until( EC.presence_of_element_located((By.ID, "DataTables_Table_5")) ) scores_list = details.find_elements_by_tag_name('tbody') for sco ...

pythonhtmlseleniumwebdriver

Troubleshooting issue with parsing MySQL data in HTML table using Node.js

Seeking Assistance! I am currently in the process of developing a node file that displays data from MySQL on an HTML page with a search bar. My issue is that sometimes when I run the code, enter something into the search bar and hit the button, it works s ...

javascriptjqueryhtmlnode.js

Encountering difficulty loading a Laravel project due to an error

I encountered an issue with the master.blade.php file located in the views folder. The error message reads as follows: *<br/>ParseError <br/>syntax error, unexpected '{', expecting ')' (View: E:\soft\Xampp2\h ...

javascriptphphtmlcsslaravel

Adjustments to the positioning of masonry columns

Hello everyone, I'm in need of some assistance with editing this code. My goal is to make the effect clickable rather than activated by hovering. You can view the current code snippet here. Here is the existing code: $container.find('.shifty-i ...

jquerycss

Adding space and arranging the cards in a horizontal layout using Bootstrap

I'm working on a code and an HTML page with Bootstrap enabled. The current setup simply displays three bootstrap cards with images vertically on the page. Now, I would like to: a) Add a margin from the left-hand side. b) Display the cards horizontal ...

htmllayoutbootstrap-4marginbootstrap-cards

Structured data for question and answer pages

I've been working on incorporating schema.org tags into my website, specifically for a Q&A page. However, I'm encountering issues when trying to add all three tags within the same HTML page - they seem to be overlapping. My goal is to structu ...

htmlschema.org

Adjust the background color and transparency of a specific section using HTML

Is there a way to modify the background color or opacity of a specific area within an image? Take a look at my HTML, JavaScript, and CSS: function changeColor() { document.getElementById('testid').setAttribute("class", "style1"); } ...

javascriptcsshtmlarea

Filter kendo grid by selecting multiple options from a drop-down menu in the mult

I am working with a kendo grid and an HTML drop down. When I set the drop down to single select, I can successfully filter the kendo grid based on the selected item's string value. Below is the filtering code that works for single select: $("#Locati ...

javascriptjqueryhtmldrop-down-menukendo-ui

Exploring ways to loop through a JSON array and embed it into an HTML element

After the ajax request, the data returned is structured as follows: Data = [ ["18/02/2019", "A"], ["19/03/2019", "B"], ["21/05/2019", "C"], ] The ajax request was successful and the data is stored in a variable named Data within a function. ...

javascripthtmlcssjsonajax

The page switch with a jittery effect

Could really use some assistance with this code that has been giving me trouble for quite a while now. It's a simple HTML, CSS, and JS code involving two pages. [The second page overlaps the first by default, but adjusting the z-index of the first p ...

javascripthtmlcss

Synchronize information from CouchDB to PouchDB in order to enable offline storage on a Windows 7 system through the utilization of Google Chrome version

My goal is to sync data from CouchDB to PouchDB for offline storage using the following code to retrieve data from CouchDB: db.replicate.from('http://test.iriscouch.com/todo','idb://todo', function (err, changes) { if (err) { conso ...

windowshtmlgoogle-chromecouchdbpouchdb

AJAX: Displaying the contents of a folder. Issue with URL resolution

I'm attempting to showcase a collection of images stored in a specific folder within a div. My approach involves utilizing AJAX within a JavaScript file titled edit, which is positioned one directory away from the index route. This implementation is b ...

javascriptjqueryhtmlnode.jsajax

Unable to display a mesh using THREE js

Could there be an issue with my implementation of THREE.Mesh? I'm attempting to generate a torus mesh in three.js using what I believe to be correct mathematical calculations. However, the result is only displaying a portion of the torus, and changing ...

javascripthtmlthree.js

In my opinion, CSS3 transform translateZ can be likened to scaling in some way

There are instances where I believe that the translateZ and scale properties produce similar effects, akin to zooming in or out. I suspect there is a mathematical relationship between them. If I know the value of one, such as translateZ(-1000px), along wi ...

htmlcsstransformscale

Adding animation to a div that is being appended can be done by using JavaScript functions and

I am looking to incorporate animation into my title div. Below is the HTML code I have so far: <div class="particles" id="tittle"> <!-- Displaying title from Firestore using JavaScript --> </div> Here is the CSS cod ...

javascripthtmljquerycss