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

Restrict the child's height to the remaining space within the parent container

I'm attempting to divide the viewport's height between two divs. In the top div, there is a small div followed by a larger div that should scroll if it doesn't fit within the remaining space of the parent div. Below is the structure of my HT ...

htmlcss

Adjust the value based on selection

I aim to display another div when either the Full Time or Part Time option is selected. Additionally, I would like to calculate a different value for each option; if 'Part Time' is chosen, PrcA should change to PrcB. Here is the code snippet tha ...

javascripthtmlfunctionselect

Mysterious obsidian container lurking in the background of the video on Chrome version 67.0.3396

Displayed on the page is an HTML Video tag, which streams a video from the speaker (WebRTC). <div id="remoteVideoContainer"> <video id="remotevideo" autoplay="autoplay" controls="" loop="loop" preload="true" height="500" width="100%"> ...

htmlcssgoogle-chromewebrtc

Ways to stop a background image from repeating?

<div style="background-image: url('https://i.ibb.co/v1B855w/bg15.png'); color: #000000; background-color: #000000; background-attachment: fixed; text-align: center;"><img src="https://i.ibb.co/L6zQY0S/name6.png" /> ...

htmlcss

Can you explain the distinction between angular input and native HTML attributes when used with HTML tags?

Take the input tag as an example, where you have two options to specify a maximum length: <input [maxLength]="20" type="text"> <input maxLength="20" type="text"> Are there any real-world distinctions between using one approach over the othe ...

htmlangular

Is this the correct method for constructing a class in CSS?

What is the correct way to style a class with CSS and write HTML code? .first{ color:red; } Here is an example of HTML code: <class id=first> <p> some text </p> <p> some other text </p> ...

htmlcss

Guidelines on creating actionable functions using JavaScript

Having trouble connecting the form to the database and looking for a solution. This is the HTML form that I've been working on, attempting both POST and GET methods. <form id="register" action="script/register.js" method="post"> <label for= ...

javascriptjqueryhtml

Guide to putting a new track at the start of a jPlayer playlist

I am currently working on a website that utilizes the jPlayer playlist feature. I am facing an issue, as I need to implement a function that adds a song to the beginning of the playlist, but the existing add function only appends songs to the end of the pl ...

javascriptjqueryhtmljplayer

Utilizing jQuery to eliminate a script function from an external webpage

Currently, I am utilizing a ColdFusion script to load an external page within the container tag. This external page contains a sorting function defined as: function sorting(sortid). However, this function's sorting criteria constantly leads to errors ...

javascriptjqueryhtml

How can I create a circular Datepicker in JavaFX?

Struggling with customizing my JavaFX application using CSS. Everything was going smoothly until I encountered the Datepicker. Despite trying various approaches, none seem to be working. Is there a way to round the Datepicker just like my TextFields? Here ...

javacssjavafxjavafx-8javafx-css

Leveraging AJAX to assist in PHP for data parsing

I am currently exploring the world of AJAX and grappling with a unique situation. I am in the process of developing an HTML app that will be integrated into a mobile application using PhoneGap. The main objective of my project is for the HTML page to con ...

javascriptjqueryajaxhtmlcordova

Tips for submitting a form using javascript while preventing the default action

Looking for a way to submit a form in Javascript and prevent the default action? Let's explore how you can achieve this. Initially, my HTML form with the ID "contact_form" had an input element like so: <input id="contact_send_msg" type="submit" val ...

javascripthtmlajaxforms

Issues with JQuery list selectors

Many individuals have raised concerns about selectors in the past, but no matter what I try, my code seems right yet it doesn't work as intended. My situation involves a list of actions that are displayed or hidden when their corresponding "folder" is ...

javascriptjqueryhtmljquery-selectorshtml-lists

Tips for closing the navbar by clicking elsewhere on the page

Is there a way to modify my code in order for the navbar to close when clicking outside of it, while staying open if something inside it is clicked? $(document).ready(function() { $('.nav-btn').on('click', function() { $('.na ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Position elements in the center of the page at 33.3333% width

I'm facing a challenge with centering elements that are floated left and have a width of 33.33333% on the page. I want the text inside these elements to remain aligned to the left, but I'm unsure how to go about centering the items: ul.home-pr ...

htmlcss

Concealing Bootstrap 3 elements on a split-screen layout

I encountered a peculiar issue with Bootstrap 3. When I resize my browser width to half the screen, there is a slight 1px threshold where both "hidden-xs" and "hidden-sm" elements become visible simultaneously. Is there a way to fix this so that only one o ...

csstwitter-bootstraptwitter-bootstrap-3

Creating a range using v-for directive in Vue

For example: range(3, 5) -> [3, 4] range(5, 10) -> [5, 6, 7, 8, 9] I am aware that we can generate range(1, x) using v-for, so I decided to experiment with it like this: // To achieve the numbers in range(5, 10), I set (10 - 5) on `v-for` // and t ...

javascripthtmlvue.jsecmascript-6range

Transform your ordinary HTML select into a stylish span with this custom CSS class

I need help making a select element appear like a span under certain conditions. The CSS class I currently have works with input boxes, but not with dropdowns. Is there any advice on how to style the select element to look like a span without actually repl ...

jquerycssdrop-down-menuhtml

Limiting the displayed portion of a table and implementing scrolling instead

I am currently working with a static HTML template that contains the following code: <table> <thead></thead> <tbody></tbody> </table> Using jQuery and AJAX, I am dynamically adding and removing rows and columns ...

javascriptajaxhtml

Need help fixing my issue with the try-catch functionality in my calculator program

Can someone assist me with my Vue.js calculator issue? I am facing a problem where the output gets added to the expression after using try and catch. How can I ensure that both ERR and the output are displayed in the {{output}} section? Any help would be a ...

javascriptcssvue.jsbootstrap-4calculator