Scrollbar is unable to reach the bottom of the container

Currently, I am facing an issue with displaying multiple rows of products in a container. The scroll does not allow me to reach the end of the container as shown in the picture below. Is there something wrong with my current setup? And is it possible to avoid setting a max-height for the container, considering that I will be adding more rows in the future?

<div class="tab-content" id="fe-scrollable">
  <div>CONTENT HERE</div>
  <div>CONTENT HERE</div>
  <div>CONTENT HERE</div>
  <div>CONTENT HERE</div>
</div>

.tab-content {
    overflow-y: scroll;
    max-height: 1180px;
}

https://i.sstatic.net/1c3pH.jpg

Answer №1

It appears that there is another container or DIV element overlapping your scrollbar content. To resolve this issue, consider restructuring your webpage so that the tabs are positioned behind the scrollable content or, even better, have the scrollable content appear above the tab content.

Without seeing your specific code structure, it's difficult to provide a precise solution but perhaps you currently have something like this in your code:

<div class="container">
    <div class="scrollable-content">
        <div>Content</div>
        <div>Content</div>
    </div>
    <div class="tab-content">
        <div>Tab 1</div>
        <div>Tab 2</div>
    </div>
</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

Ways to insert additional panels prior to and after a selected panel

A button is provided in the report designer detail band that, when clicked, should add new panels immediately before and after the detail panel. $parentpanel = $this.parents(".designer-panel:first"); This code snippet is used to locate the parent panel u ...

Is there a way to decrease the jQuery UI file size?

Hey everyone! I recently downloaded a search box suggestion from this link. However, I noticed that the .js file at is quite large at 426kb. Does anyone know of a way to reduce the code within the file or have any simpler coding suggestions for creating ...

Navigating JSON data through drilling techniques

There is an API available at this link: I'm struggling to filter the data specifically for objects marked as potentially hazardous asteroids. How can I modify my jQuery Ajax code to achieve this without getting an 'undefined' result? $(doc ...

Incorporating a switch button for toggling functionality in a Rails application

I attempted to convert a select tag into a JavaScript toggle on/off switch within my Rails application. After some searching, I came across a straightforward solution on the W3Schools website. http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryj ...

What steps can I take to bring this idea to life in my gallery?

Currently, I am facing a roadblock while transitioning my design concept into actual code. My main concern lies with creating this art piece. Although the gallery is up and running with all the images in place, I'm encountering difficulties with the s ...

The JSON reply was extremely delayed

I am working with a URL structure like this: example.com/account/reset/6b183b5025d5b865963f4499f257705d and I have an AJAX submit function in my script as follows: form.ajaxSubmit({ url: '/account/reset', succes ...

Tips for clearing a saved password in a browser using Angular.js and Javascript

There is an issue with the password and username fields in my Angular.js login page. When a user clicks on the 'remember me' option in their browser after logging in, the saved username and password are automatically displayed in the respective f ...

Troubulation with z-index on HTML5 Canvas in Google Chrome

After some testing, I've discovered that giving a canvas a z-index with the CSS property position:fixed in Chrome can cause rendering issues for other elements with the same position fixed. Interestingly, this problem only arises when the canvas excee ...

Laravel 5.0 facing issues with AJAX requests

For my Laravel 5.0 project, I am utilizing Google API's for Google Oauth login. After successfully retrieving the email and id_token of the currently logged-in user, I aim to send this data to the SigninController to access our own API. The goal is to ...

Are there any great C# applications built on asp.net?

Seeking recommendations for quality open source ASP.NET (C#) applications that align with the following criteria: Well-designed and structured with multiple tiers Clean, well-commented codebase Incorporates various design patterns effectively Web pages ...

How about placing one element above another? What sets apart using the margin property versus the position property for achieving this effect?

As I pondered the concept of stacking context, a question arose in my mind. Through my readings, I learned that by not applying any CSS properties that create a stacking context (such as position), it is possible to stack elements on top of each other usin ...

css / Chrome is not displaying the correct background size

After experimenting with various CSS properties, I still can't get my background image to stay fixed on the browser screen without any scrolling. For better understanding, I have attached an image below: https://i.sstatic.net/ieCZN.jpg Below is my C ...

What are the steps to creating the arrow symbol shown in the image provided?

I've come across a design that includes a text arrow that looks like this: https://i.sstatic.net/lzBAE.png Is there a way to create that arrow design? Using the standard > doesn't seem quite right: https://i.sstatic.net/7b6T6.png ...

Ways to adjust the size of an HTML paragraph tag

I'm currently involved in working on an HTML/JS application that is similar to PowerPoint. This application allows users to create slides and display them on screens of various sizes (such as a screen with dimensions of 128x90 pixels or 2x1 meters). ...

When the screen size decreases, display the title on two lines

Currently, I am in the process of developing a react web application with the assistance of redux. My main objective is to ensure that the page is highly responsive. At this point, there is a title positioned at the top displaying: Actions to do: Past due ...

Retrieve information from the database utilizing AJAX and jQuery

Encountering some challenges when trying to retrieve a value from a database using AJAX in my jQuery script. index.php: <?php include 'db/db_connection.php';?> <?php include 'db/db_getvalues.php';?> <div class="arro ...

Guide on Passing a jQuery ID to Bootstrap Modal for Utilization in PHP Function

Despite searching through numerous similar posts, I am still unable to find a solution to my problem. My goal is to execute a PHP function within a Bootstrap Modal that requires two parameters, one of which must be fetched from jQuery as a row ID. Although ...

Issue with bootstrap: When multiple svg tags are added to my navbar, it causes the container content to be deleted

Utilizing the Jumbotron Example from Bootstrap Examples has led to a peculiar issue when adding multiple icons to the navbar. After inserting anything following the first icon, a significant portion of the "container" class mysteriously disappears, as if i ...

The width of the Bootstrap tooltip changes when hovered over

Currently, I am facing a peculiar issue with my angular web-application. Within the application, there is a matrix displaying data. When I hover over the data in this matrix, some basic information about the object pops up. Strangely, every time I hover ov ...

Displaying a header on each page along with a gridview that has authentic pagination

I'm struggling with setting up my header div and grid view to print correctly across multiple pages. The header div looks like this: <div id="header" style="width:100%; padding: 6px; margin-right: 20px; border-top-style: dotted; border-color: inh ...