Issue caused by overflowing content and resizing the display

I am facing a challenge with my website.

Essentially, my webpage has the <html> set to overflow:hidden, with two horizontal navbars, a fixed vertical sidebar on the left, and a central div with the height: 90% property.

Edit: The container div now has the overflow: auto property.

The content is dynamically loaded into the container area through AJAX. This content primarily consists of tabular data, and the goal is to allow the container area to scroll when there is an overflow of content. Everything functions correctly on a standard monitor with a regular height. However, when viewed on a laptop, the last 1-2 rows are 'hidden' due to html overflow.

If I reduce the original height: 90% to a lower value, the issue is resolved. But when I switch back to a larger screen with the reduced height, the content area is not fully covered.

Is there a CSS solution to address this problem? If not, is it possible to handle it through a JavaScript event triggered by screen resizing?

javascripthtmlcssresizeoverflow

Answer №1

To efficiently manage the layout and spacing of your tabular data container, a swift solution can be implemented using JavaScript. By explicitly defining the height of the container, you can gain better control over the overall design.

When setting the height, it is essential to consider the heights of any navigation bars present. In jQuery, the code snippet for this operation may resemble the following:

function adjustContainerHeight()
{
    $('#tabularBox').height($(window).height() - $('#topBar').height() - $('#bottomBar').height());
}

// Adjust height on page load
$(function(){
    adjustContainerHeight();
}

// Also, adjust height on window resize
$(window).resize(adjustContainerHeight);

There are various optimization techniques that can be applied to enhance this functionality. It is crucial to pay attention to devices with smaller screens, although this issue would exist when using percentages as well.

Lastly, ensure that Overflow: auto; is set for the tabular box element.

Answer №2

To achieve a vertical scroll bar in a div with a height of 90%, simply apply the CSS property of overflow: auto or overflow: scroll. This will ensure that the scroll bar is visible only within that specific div.

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

Displaying Table Headers on Page Breaks in Laravel PDF with Webkit Technology

Let me provide some context: I am utilizing Laravel to generate a view that is then converted to a PDF using barryvdh/laravel-snappy with the help of wkhtmltopdf, and everything is functioning as expected. However, I am encountering difficulties in stylin ...

htmlcsslaravelpdf-generationpage-break

Converting a 'div' element into a dropdown menu with CSS and Jquery

I am facing a challenge where I have a collection of buttons enclosed in a div that I want to resemble a dropdown: <div id = "group"> <label> Group: </ label> <div value =" 1hour "> 1h < / div> <div value =" 2hou ...

javascriptjquerycss

Tips for dynamically expanding the interface or type of an object in TypeScript

Currently, I am exploring the integration of PayPal's Glamorous CSS-in-JS library into a boilerplate project that also utilizes TypeScript. Glamorous provides a way to incorporate props into an element as shown below: const Section = glamorous.secti ...

javascriptreactjstypescriptjsxglamorous

Looking for a way to extract Regular Expressions from an IgGrid cell in Infragistics?

Is it possible to apply a regular expression to a igTextEditor within an igGrid Updating? I attempted to utilize the validate option, but it was unsuccessful. $("#schedulerTable").igGrid({ columns: $scope.schedulerColumns, widt ...

javascriptinfragisticsignite-uiiggrid

Photos appearing outside the border

My current border has a vertical flow like this: https://i.sstatic.net/CdUm6.png (source: gyazo.com) However, I want the content to flow horizontally from left to right instead of top to bottom. When I apply float: left; to the controlling div, it resu ...

htmlcss

What is the process for sending values to a component?

I am working with a component called MyComponent: export class MyComponent { @Input() active:boolean; constructor() { console.log(this.active); } } In this component, I have declared an Input, and I pass it in as follows: <mycomp ...

javascriptangular

Encountering the error "Module 'aws-sdk', 'child_process', 'net' cannot be resolved" within the /node_modules/watchpack directory when using Webpack

I'm encountering issues while trying to compile my prod webpack file, specifically receiving 5-10 errors related to "cannot resolve module" aws-sdk and child_process. All of these errors seem to point back to the same path: "ERROR in (webpack)/~/watc ...

javascriptnpmwebpackweb-deployment

Converting the structure of an object into an array structure for highcharts can be achieved through

I am looking to transform the object structure below: [ { "tahun": "2010", "apel": 100, "pisang": 200, "anggur": 300, "nanas": 400, "melon": 500 }, { ...

javascriptajaxdjangohighcharts

Converting a Javascript string to 'Title Case' does not yield any results

I'm having trouble identifying the bug in this code as it's not generating any output: function convertToTitleCase (inputString) { var wordArray = inputString.split(' '); var outputArray = []; for (var j = 0; j ...

javascriptarraysfunction

What is the process of sending a file to a server and storing it in a MySQL database?

Currently, I am exploring the process of enabling users to upload images of specific dimensions (468px by 60px) to a designated directory on my server, such as example.com/banners. Subsequently, the URL link to these uploaded banners will be stored in a ...

phpmysqlhtml

What happens when data is managed in getStaticProps and utilized in useEffect within a component?

On my page, I utilize the getStaticProps function to fetch a list of objects containing book titles, authors, and character lists. Each object is then displayed within a component that formats them into attractive pill-shaped elements. The component rende ...

htmlreactjsnext.js

When using ng-click, each function is executed only a single time

After creating a function that combines two separate functions (recorder.start() and recorder.stop()), I encountered a problem where the program could only fire one of the functions at a time when they were added to one ng-click. This meant that in order f ...

javascriptangularjsgoogle-chrome

Having trouble with the GitHub publish action as it is unable to locate the package.json file in the root directory, even though it exists. Struggling to publish my node package using this

I've been struggling to set up a publish.yml file for my project. I want it so that when I push to the main branch, the package is published on both npm and GitHub packages. However, I am facing difficulties in achieving this. Here is the content of ...

javascriptnode.jsnpmgithub-actionspackage.json

What is the best way to organize JavaScript code for handling multiple variables from multiple form elements while also preserving the selected choices?

For instance, suppose I have an HTML form like this: <form role="search" method="get" id="searchform" action="" > <!-- DIRECT SEARCH INPUT TO SEARCH STRING --> <input type="text" value="" name="s" id="s" /> <input type=" ...

javascriptajaxdesign-patternsoptimizationarchitecture

Crafting numerous CSS templates

I am currently working on creating multiple boxes or templates (5 on each row) from a movie API. I have successfully retrieved all the necessary data and do not require a responsive design. https://i.sstatic.net/CNz9R.png The issue arises when I attempt ...

jquerycssajax

Generating exportable dynamic code in Javascript

Any assistance or links to similar inquiries would be greatly welcomed as I have conducted some research but am uncertain about the best approach to take in this situation. I find it difficult to articulate exactly what I need, so I have created a visual ...

javascriptdynamic-programmingmodularity

Automate the execution of webdriver/selenium tests when a form is submitted

I am currently faced with a challenge in setting up an application that will automate some basic predefined tests to eliminate manual testing from our workflow. The concept is to input a URL via a user-friendly form, which will then execute various tests ...

javascriptnode.jsseleniumwebdriver

Is it possible for me to send JSON data using a form to HTTP_RAW_POST_DATA?

Currently, I am in the process of creating a web interface for code that is typically designed to run on Android devices. I transmit JSON data and retrieve the data by using the following method: $json = json_decode($HTTP_RAW_POST_DATA,true); Is there a ...

phphtmljsonpost

"Enhancing Real-Time Communication in Angular with Websockets and $rootScope's Apply

Currently, I am experimenting with an Angular application that utilizes a websocket to interact with the backend. I've encountered some challenges in getting Angular's data binding to function correctly. In this scenario, I have developed a serv ...

javascriptangularjswebsocket

Modifying Element Values with JavaScript in Selenium using C#

As a newcomer to automation, I am facing a challenge with automating a web page that has a text field. I initially attempted using driver.FindElement(By.XPath("Xpath of elemnt").SendKeys("Value"); but unfortunately, this method did not work. I then resor ...

javascriptc#selenium