The CSS scrollbar is visible on the screen, but for some reason,

I'm seeking a solution to enable scrolling within a div container that can scroll both horizontally and vertically.

body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.wrapper {
  width: 75%;
  padding: 0px 5px 0px 8px;
  top: 20px;
  white-space: nowrap;
  position: relative;
  margin-left: 3px;
  margin-right: 5px;
  overflow: hidden;
  height: 100%;
}
.content {
  height: 100%;
  overflow: scroll;
}
<div class="wrapper">
  <div class="content">
    <p>(Content goes here)</p>
  </div>
</div>

I am currently encountering three specific issues:

  1. The scrollbar is non-functional
  2. The horizontal scrollbar is not visible
  3. The scrollbar is overlapping other elements on the page

Visit this link for reference

htmlcss

Answer №1

The horizontal scroll bar appears at the bottom of your div, but you are unable to access it due to the overflow: hidden; property in your body. Please remove this property.

body
{
    height: 100%;
    width: 100%;
    overflow: hidden; /* <--- Remove This */
}

See Example on JSFiddle

Answer №2

Here are a few issues to address:

  1. For percentage height to function properly, you must also apply height: 100% to the html tag.

  2. The presence of top: 20px; on the wrapper element causes the horizontal content to become invisible due to exceeding 100% overall height.

  3. Utilize box-sizing: border-box to include padding in the box size calculation.

Refer to the updated example below:

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
.wrapper {
  height: 100%;
  width: 75%;
  padding: 10px;
  box-sizing: border-box;
  white-space: nowrap;
}
.content {
  height: 100%;
  overflow: auto;
}
<div class="wrapper">
  <div class="content">
    <p>Lorem ipsum dolor sit amet... (truncated for brevity)</p>
  </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

Despite having unique ids, two file input forms are displayed in the same div in the image preview

Running into a minor issue once again. It may not be the most eloquent query, but I'm genuinely stuck and in need of some assistance. I am attempting to showcase image previews of selected files in a file input form. I have a jQuery script that reads ...

javascriptjqueryhtml

Angular: The Ultimate Guide to Reloading a Specific Section of HTML (Form/Div/Table)

On my create operation page, I have a form with two fields. When I reload the page using window.reload in code, I can see updates in the form. However, I want to trigger a refresh on the form by clicking a button. I need help writing a function that can r ...

javascripthtmlangulartypescriptng-bootstrap

utilizing an ajax request to clear the contents of the div

When I click on Link1 Button, I want to use ajax to empty the contents in the products_list div <button type="w3-button">Link1</button> I need help with creating an ajax call that will clear the products in the product_list when the link1 but ...

javascriptphpjqueryhtmlajax

Implement automatic data replacement using PHP and MySQL triggers

The code provided below pertains to postar.php file include "conexao.php"; $consulta = mysqli_query($conexao, "SELECT titus.titus, titus.des, titus.link from titus"); while($postagem = mysqli_fetch_object($consulta)); echo "<d ...

phphtmlmysql

What is the syntax for implementing conditional statements within the style jsx of Next.js?

Recently, I've been exploring the use of <style jsx> in my Next.js project and encountered a scenario where I needed to style an element based on a conditional statement. Additionally, my project relies on tailwindCSS for styling: <div classN ...

cssnext.jsstyled-jsx

Initiate a webpage reload

Currently, I am developing an android application specifically designed for tablet devices. This application will display a simple HTML page with text that will be shown for extended periods of time, sometimes up to several hours. The content on this page ...

htmltriggersasp-classicrefresh

PHP - Unable to store the input content

I've encountered an issue with my website where I need to create a form for users to submit new information or news. Below is the code snippet that I have: <?php include "0begin.php"; $title=$_POST["title"]; isset($title) or $title=$_GET["tit ...

phphtmlwebnetworking

Switching Symbols with JQuery

Hello, I am brand new to utilizing javascript and I'm currently experimenting with the toggle function. My goal is to create show/hide functionality while also toggling arrow icons. Specifically, I want a right arrow next to the link "More -->" and wh ...

javascriptjqueryhtmlcss

Top method for removing quotation marks from form input using jquery

Here is a form input that I need to handle: <tr class="formulaRow"> <input type="text" class="ingredient required" name="ingredient"> </tr> Currently, the value from this input is stored as follows: var ingredient = $(".formulaRow").fi ...

javascriptjqueryhtml

No visible changes from the CSS code

As I create a small HTML game for school, I'm facing an issue with styling using CSS. Despite my efforts to code while using a screen reader due to being blind, the styling of an element isn't being read out as expected. The content seems to be c ...

javascripthtmlcssng-animatescreen-readers

Various Plus/Minus Containers

One issue I am facing is that when using multiple counters on the same page, my - and + buttons to decrease or increase the number in a text box do not function properly. The script provided below works for one counter. How can I modify this code so that ...

javascriptjqueryhtml

Show a directional indicator on hover in the date selection tool

I am currently using a datepicker that looks like this: When I hover over it, three arrows appear to change days or show the calendar. However, I would like to remove these arrows. Here is the code snippet: link: function (scope, element, attr, ngModel ...

javascriptjqueryhtmlcssdatepicker

What is the maximum character limit for the JQuery validation plugin?

Currently, I am utilizing the JQuery validation plugin in my project. My goal is to set a maxlength for one of the fields. Here's an example of how it can be done by defining rules externally: rules: { Message: { required: false, maxLe ...

javascriptjqueryhtmljquery-validate

Issues with the width of Table TD cells not being responsive

I'm having trouble adjusting the width of my dropdown menu columns. I've tried various methods, but can't seem to get each column to be 200px wide as desired. .dropbtn { background-image: url("../sliki/meni.png"); width: 220px; heig ...

htmlcss

Issues with navigation menus in Bootstrap/Wordpress

My mobile drop-down menu is giving me some strange issues. When you toggle the button, the menu briefly appears just below the button before moving to its correct position. Sometimes it doesn't work at all, and clicking has no effect. You can witnes ...

javascriptcsswordpressbootstrap-4

Loss of Image Quality when Zooming out Canvas

I have developed a code to implement zoom-in and zoom-out functionality for a canvas image. However, I am facing an issue where the quality of the image deteriorates when zoomed more than once. I am using the canvas2image plugin to convert the canvas into ...

htmlcanvashtml5-canvas

I'm having trouble getting Jquery's insertAfter() function to function properly

After creating a parent div and using jQuery's insertAfter() method to insert additional divs, an unexpected issue arises. The first record goes to the bottom, while subsequent records are inserted above it. Below is the function in question: functi ...

jqueryhtmlinsertafter

Tips for aligning text and image in the center of a div with a specific width:

I'm having a hard time figuring this out for some reason. I need to center both text and an image on the same line within a div that has a 100% width. Check out this jsfiddle link for reference: http://jsfiddle.net/JnbeJ/ ...

htmlcsscentering

Adjust the code to enhance the functionality of web components in Sharepoint

I recently came across some code online that I'm trying to modify in order to add an expanding button next to a web part on my Sharepoint site. However, the problem is that by default, all web parts are already expanded and require a click to collapse ...

javascriptjqueryhtmlcsssharepoint

Javascript callback function cannot access variables from its parent function

As a Javascript newbie, I am currently diving into callbacks for my project. The goal is to retrieve address input from multiple text boxes on the HTML side and then execute core functionalities upon button click. There are N text boxes, each containing an ...

javascripthtmlcallback