Issue with excessive content causing scrolling difficulty

I've created CSS for a modal dialog, but I'm facing an issue. When the content exceeds the vertical space of the wrapper, the scrolling functionality doesn't work correctly.

Although I can scroll, it's limited and I can't reach the beginning of the content.

What am I doing incorrectly?

.fade {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  overflow: scroll;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background: white;
  width: 300px;
}
Some text

<div class="fade">
  <div class="content">
    Fist line<br>Text line<br>Text line<br>...
    ...Last line
  </div>
</div>

htmlcss

Answer №1

The issue arises from the use of 

transform: translate(-50%, -50%);
. To resolve this, try modifying the CSS line to transform: translate(0%, -50%); and see if that eliminates the problem.

Answer №2

To properly position the content, you need to have it set as relative within an absolutely positioned wrapper.

.fade {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  overflow: scroll;
}

.content-wrapper {
  position: absolute;
  height: 100%;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 300px;
}

.content {
  position: relative;
  background: white;
}
Some text
<div class="fade">
   <div class="content-wrapper">
      <div class="content">
         First line<br>Text line<br>Text line<br> 
         ...
         Last line
      </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

Come up with various transition animations for multiple child elements that activate when the cursor hovers over the parent element

I have a CSS & HTML code snippet that looks like this: .item-video-kami { width: 480px; overflow: hidden; position: relative; } .item-video-kami>.play-icon.full-height>svg { width: 106px; color: #ffffff50; } .item-video-kami img { ...

htmlcss

Guide on how to add multiple options to a select element in HTML using prototype.js

What is the best way to add multiple options to a select tag in HTML using prototype js? Appreciate your help. ...

javascripthtmlprototypejs

The UI gets all wonky when using ThemeRoller for jQuery

Currently, I am encountering an issue where I want to utilize ThemeRoller for implementing custom themes on my views. However, when I apply these themes, the interface ends up looking distorted, as shown in the images below: Before using ThemeRoller: Aft ...

jquerycssasp.net-mvcjquery-mobilejquery-mobile-themeroller

Retrieve the HTML data and save it as page.html, displayed in a VueJS preview

After developing an innovative VueJS-based application for managing front-end content, I am now eager to enhance it with a 'download' button feature. This new functionality will allow users to easily download the previewed and edited content in H ...

javascripthtmlvue.js

Leveraging AJAX for seamless PHP execution without page refresh

I have this HTML form: <form class="clearfix" method="POST"> <input name="username" type="text" placeholder="Username:"> <input name="password" type="password" placeholder="Password:"> <textarea name="comment" placeholder="Comment: ...

phphtmlajaxformspost

What is the process for configuring my CSS and JS files to send HTTP response headers?

During our security evaluation of a web application built in Laravel 4, we discovered that the Anti-MIME-Sniffing header X-Content-Type-Options was not properly configured to 'nosniff'. The following PHP code snippet sets the necessary HTTP heade ...

javascriptphpcsshttphttp-headers

Creating a visually appealing label by customizing it according to the child div

Can the label be styled based on whether the input is checked or not using CSS, or do I have to use JavaScript? <label class="filterButton"> <input name="RunandDrive" type="checkbox" value="1"> </label> ...

javascriptcss

Challenges encountered while using Selenium WebDriver to upload images

I'm having trouble adding an image as a normal attachment to an email (not as an inline image). When inspecting the HTML DOM with Firebug, I noticed there are two elements with xpath //input@type='file', which is due to the presence of two b ...

javascripthtmlseleniumxpath

Steps to make a pop-up window for text copying by users

On my website, I have a link that users need to copy for various purposes. I want to provide an easy way for them to see the link and then manually copy it to their clipboard. Instead of using code to copy to the clipboard, I am looking for a solution whe ...

javascriptjqueryhtmlpopup

Combining PHP and MySQL with a join statement

I am trying to calculate the average rating for each store in a directory list using MySQL's AVG function. Whenever someone reviews a store, they assign a rating ranging from 1 to 5. This rating is then inserted into the rating column of the reviews ...

phphtmlmysqlsql

ng-disable will only evaluate when the page is initially loaded

I am facing an issue with around 10 textboxes on a form page. The condition I have is as follows: Disable the textboxes if the logged in user does not have permission Disable the textbox if the user has permission, but there is already a value loaded fro ...

jqueryhtmlangularjs

Ways to unveil a concealed div element using JavaScript

If javascript is disabled, I want to hide a div. If javascript is enabled, however, I don't want to rely on using the <noscript> tag due to issues in Chrome and Opera. Instead, my approach is as follows: <div id="box" style="display:none"> ...

javascripthtmlcss

Struggling with getting the local slick slider to run smoothly

After installing the slick slider plugin and trying out some basic examples on jsfiddle, I encountered an issue when running it locally. For some reason, the results I get when testing it on my local environment are different from what I see on jsfiddle. ...

jqueryhtmlcssslick.js

Transfer the values selected from checkboxes into an HTML input field

I am attempting to capture the values of checkboxes and then insert them into an input field once they have been checked. Using JavaScript, I have managed to show these values in a <span> tag successfully. However, when trying to do the same within a ...

javascriptjqueryhtml

Indent the text within a span element that is displayed as an inline block

I am in search of a solution using only CSS for the following issue. Take into account the HTML below: <p> <span>Some text</span> <span>Some text</span> </p> Both <span> elements are set as inline-block. ...

css

Enhanced Bootstrap Carousel with White Background Transitions

Having trouble articulating my issue, so here's a video that should clarify: https://example.com/video I'm using a bootstrap carousel template for a full-width slider. Despite my efforts to remove the white-space transitions, they persist. Am I ...

javascripthtmlcsstwitter-bootstrap

Ensuring responsive design: Forcing Bootstrap 3 / Knockout Navbar to collapse on mobile site view

While working on a website, I incorporated Knockout.js and added a click event to a href in the navbar. The issue is that the navbar doesn't automatically close when using it on a mobile device after the click event triggers. Is there a way to ensure ...

cssknockout.jstwitter-bootstrap-3

Is it possible to balance proper CSS and Javascript maintenance with the use of a Template Engine?

When using a template engine like Velocity or FreeMaker, you have the ability to break up your HTML into reusable components. For example, if you have an ad <div> that appears on multiple pages of your site, you can create a file containing that < ...

javascriptcssvelocitytemplate-engine

Creating Seamless, Unified Shape-to-Shape (Containers) Transition with CSS and JavaScript - A Step-by-Step Guide

I am experimenting with creating a unique effect where two rectangular shapes, each containing text and with rounded ends, move towards each other, merge to form a single rounded rectangle as the page is scrolled down, and then separate back when scrolling ...

javascripthtmlcssanimationcss-animations

Passing a click event to a reusable component in Angular 2 for enhanced functionality

I am currently working on abstracting out a table that is used by several components. While most of my dynamic table population needs have been met, I am facing a challenge with making the rows clickable in one instance of the table. Previously, I simply ...

javascripthtmlangulartypescriptevent-handling