The contents within the div are failing to scroll upwards

Looking to create a temporary reading tool to enhance my English skills for the IELTS exam. Currently, I am working on incorporating 1-40 answer fields on the right-hand side of the screen.

https://i.sstatic.net/EwoMM.png

I'm facing issues with scrolling through all the answer input fields from 1-40 as they are currently not scrollable. I've attempted using the overflow-y CSS property without success.

.sidepanel {
  width: 0;
  position: fixed;
  z-index: 1;
  height: 100%;
  top: 0;
  right: 0;
  background-color: #111;
  transition: 0.5s;
  padding-top: 60px;
}
<div id="mySidepanel" class="sidepanel">
  <div class="container">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">Close</a>
    <div class="row">
      <div class="col-md-12">
        <h6 class="text-center">Answer-sheet</h6>
       <!-- Additional inputs and labels omitted -->
       
      </div>

    </div>

  </div>
</div>

htmlcss

Answer №1

For optimal performance, ensure you set height: 100% for both the html and body elements. Additionally, include overflow-y: scroll (or auto) in your sidepanel element styling:

html, body {
  height: 100%;
  margin: 0;
}
.sidepanel {
  box-sizing: border-box;
  width: 180px;
  position: fixed;
  z-index: 1;
  top: 0;
  height: 100%;
  right: 0;
  background-color: #111;
  transition: 0.5s;
  padding-top: 60px;
  overflow-y: scroll;
}
<div id="mySidepanel" class="sidepanel">
  <div class="container">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">Close</a>
    <div class="row">
      <div class="col-md-12">
        <h6 class="text-center">Answer-sheet</h6>
        
        <!-- Inserted Form snippet with up to label 40 input fields here -->

      </div>

    </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

Functionality of JavaScript limited within a form

Here is some HTML code I am working with: <div class = "login"> <form> <input type="text" id="username" name="username" placeholder="Username" style="text-align:center"> <br> <br> <input type="pa ...

javascripthtml

Creating dynamic animations with Keyframes in CSS

Query If we consider the illustration below: A-------------B------------C How can I begin an animation from the middle point (B), then have it move to A, return to B, and finally reach C? I attempted to create an example, but it is not functioning corre ...

htmlcss

Cannot assign border to an undefined element - JavaScript

Currently, I am attempting to validate some code using javascript. However, I am encountering a frustrating issue where I keep getting an "Uncaught TypeError: Cannot set property 'border' of undefined". Being relatively new to javascript, I ...

javascripthtml

Using Ajax to implement Basic Authentication for securely accessing an https-protected webpage without requiring users to manually enter their username and password in a

Is there a way to access and display a website page hosted at this URL - , without encountering any authentication dialog box from my application on the same network? I have been unable to bypass the username and password entry request. I successfully imp ...

javascripthtmlajax

Challenges arise when trying to load CSS on an EJS page in conjunction with using res.redirect()

When using Express with EJS, my base route is set as follows: router.get("/", productsData.getProducts); The "productsData" is sourced from my controllers page and the code snippet within that page is as follows: exports.getProducts = (req, res, next) => ...

javascriptcssnode.jsexpressejs

Tips for including an HTML table in Rmarkdown

I recently utilized the 'sjPlot' package to perform data analyses. Specifically, I used the 'sjt.df' function to generate a HTML table that provides a simple description of variables in my dataset. I then proceeded to create an Rmarkdow ...

htmlrr-markdown

Initialization of webix combo options values in HTML code

Currently, I am working with the Webix UI framework and I am trying to achieve something similar to: <div view="combo" options="fruit"></div> This is what I have in my JavaScript file: $scope.fruit =[{id:1, value: "Apple"}, {id:2, value: "Ba ...

javascripthtmlwebix

I'm feeling a bit lost on where to go next with this JavaScript

I've been working on a project in Python where I need to retrieve a file, store it in an array, and display a random string from the array on HTML. However, I have no experience with JavaScript and am unsure how to proceed. I suspect there may be an i ...

javascripthtmlcss

Can JavaScript be used to upload a file directly to memory for processing before transferring it to the server?

I'm exploring the idea of using a JavaScript encryption library (not Java) to encrypt a file before sending it to the server. Is it feasible to perform this process on the client-side and then upload the encrypted file using JavaScript, storing it in ...

javascripthtmllocal-storage

Develop a PHP polling system with a limit of one vote allowed per unique IP address

My website features an Ajax Poll where users can vote multiple times after refreshing the page, with results being recorded. However, I want to restrict voting to once per IP address and show the results upon page refresh. Below is the code: The HTML Pag ...

javascriptphpjqueryhtmlajax

Animate a dotted border with CSS

How can I make a text block with a dotted style border move like a gif image using CSS at runtime? ...

cssborder

Ways to reduce the size of images in Bootstrap 4

Is there a way to adjust the height of the images to make them fit better on the page? Here is an example of what I'm trying to achieve: https://i.sstatic.net/BMlWl.jpg I attempted to use custom CSS to modify the height, but it ended up making the im ...

htmlcssbootstrap-4

What are the best practices for utilizing CSS position (relative, absolute) combined with percentage dimensions for height and width?

There are numerous questions and answers related to this topic, but I have not come across a case like the one mentioned below. Everyone talks about setting the height and width in percentage by first setting the parent's height in percentage, but it ...

css

The external embedded CSS seems to be missing from index.html after the Docker build process

My Vue/Webpack application includes an embedded CSS link in my index.html file that references an external source. Here is an example snippet: <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" con ...

htmlcssdockernpmwebpack

Trouble assigning the 'data' attribute to the 'Object' tag using jQuery. [Limited to IE8]

I have encountered a problem when creating an object element dynamically in jQuery to display some content. The code functions perfectly in all browsers except for IE8. Here is the code snippet: j$(document).ready(function(){ j$('.ob ...

javascriptjqueryhtmlinternet-explorerinternet-explorer-8

designing various containers and adjusting their divisions

I have a pop-up window that contains the code snippet below, defining a template within a "container": <form method="post" class="signin" action="#"> <div id='container'> <div> <div id="divFeeTitle"&g ...

javascriptjqueryhtmlcss

Adding custom styles to an unidentified child element in React using Material-UI

When the function below is executed in a loop, I need to include styles for the icon which will be passed as an argument to the function. The icon element will be an unspecified React Material-UI Icon component. const renderStyledCard = (lightMode, headi ...

javascripthtmlcssreactjsmaterial-ui

My attempts to load the .mtl and .obj files using THREE.js have been unsuccessful

I've been working on creating a 3D model viewer using three.js, but I'm encountering issues with loading .mtl and .obj files. Despite following a tutorial at , the only model that loads successfully is the female one. Here is the code snippet I ...

javascripthtml3dthree.jsobjloader

Is there a way to invoke a function using $scope within HTML that has been inserted by a directive in AngularJS?

After moving the following HTML from a controller to a directive, I encountered an issue where the save button no longer functions as expected. I attempted to change the ng-click to a different function within the directive code, and while that worked, I u ...

javascripthtmlangularjs

Script to Trigger Download Button

I'm having trouble with a rar file download on my website (ravens-hangar.tk). A bunch of lines of script keep popping up. Can anyone help me out? Thanks in advance! .download { width: 120px; height: 30px; font-size: 20px; text-align: center ...

htmlcssfiledownload