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

What is the best way to ensure that the table header is printed on every page when printing?

My table has a large number of dynamic rows, and when I try to print or preview it using the window.print() function, only the table header (thead) appears on the first page. How can I make sure that the table header appears on each printed page? <div ...

javascriptphpjqueryhtmlcss

Linking the location of the pop-up to the currently selected text box

I am currently experimenting with setting the top and left values relative to the selected_element (which is active at the time of triggering the popup) in a manner similar to a tooltip. I attempted to use $().position() in combination with jQuery, but it ...

javascriptjquerycssposition

Tips for arranging the items within the slider according to the specified direction (rtl, ltr) in the Owl Carousel slider for Angular

Is there a way to dynamically change the direction of the owl-carousel-o angular slider based on the selected language? Currently, I have set rtl: true in the owl-carousel configuration during initialization. However, when the user switches to a different ...

javascriptcssangularowl-carousel

Tips for refreshing a specific div element at set intervals using JQuery AJAX?

I need to make updates to a specific div element without refreshing the entire HTML page. The code below currently works, but it reloads the entire HTML page. Additionally, I am working with different layouts where I have separate files for the header, l ...

javascriptjqueryhtmlajaxmarko

Is there a way to create an HTML popup that automatically opens a link and an image file side by side

Can a popup code be created to automatically open both a link and an image side by side? ...

htmlimagehyperlinkpopup

Utilize the Sed command to manipulate the input stream by substituting all occurrences of HTML <i> tags with <em> tags

I am attempting to create a regex with the sed command in order to process the input stream and replace all HTML tags with em tags. For example: This is <i id="x">emphasized text</i> and <i>so is this</i>. should be replaced by Thi ...

htmlbashsed

Block entry to HTML files unless the user has logged in utilizing PHP sessions

I have been working on implementing a verification process to check if a user is logged in when accessing a specific HTML file. When a user tries to access something.html without being logged in, I would like to redirect them to index.php and restrict acc ...

phphtmlsession

Ways to choose an identifier larger than

Currently, I am in the process of creating a news system for a website. For this project, I referred to a tutorial on building a news system which can be found here: To showcase the news articles, I have implemented the following code snippet: if(!$_GET[ ...

phphtmlmysql

Sequential Element Loading using jQuery upon pageload

Can someone please explain how to achieve the effect shown on this website: http://www.getflow.com/ ? I believe that jQuery is being used to gradually adjust the opacity of each element. Is there a simple JavaScript snippet available to load each image e ...

javascriptjquerycss

Problem with the purity of :global() CSS-module selectors in NextJS

Currently in the process of migrating an app from CRA to NextJS, I've encountered an issue with the .module.scss files of certain components and pages: Syntax error: Selector ":global(.label-primary)" is not pure (pure selectors must contain ...

cssreactjssassnext.jscss-modules

Animate images using mouse vertical movement

Creating websites is just a hobby for me, not something professional. Recently, I came across a beautifully designed website that had some unique features I hadn't seen before, like placing three images in one div (which I researched and learned how t ...

javascriptjqueryhtmlcss

Axis incorporating additional padding for extensive domains

Encountering a peculiar issue with d3 axis generation. When creating a bottom x axis using d3.axisBottom() for ordinal domain values, extra padding is being added at the starting and ending points of ticks on the axis. This happens when the d3.scaleBand() ...

javascripthtmld3.jssvgdata-visualization

Automatically log users out of Django and update the backend after a period of inactivity without requiring any additional requests

In my Django project, I am working on a simple multiplayer system where I need to update the isCurrentlyActive value in a user-related model automatically and then log them out. I tried using middleware following a solution from this post, which works well ...

javascripthtmlcssdjango

How can custom JavaScript objects have tags set upon click?

When it comes to JavaScript object referring, things can get a bit confusing. Imagine having a tag like this: <button id='myButton'>Hello</button> Now, let's say you create a custom class in JavaScript: function myClass(){ ...

javascripthtmlfunctionjavascript-objects

Applying a live status to a particular component (Navbar)

Currently, I've been diving into creating a navbar and wrestling with some jQuery code that was passed my way. I'll be sharing my code below, along with a Codepen link (https://codepen.io/JustNayWillo/pen/aXpKbb) for a better understanding of th ...

jqueryhtmlcssnavigationnavbar

Transform a 3D text rotation JavaScript file into an Angular component tailored TypeScript file

I have a javascript file that rotates text in 3D format, and I need help converting it into an Angular component specific TypeScript file. You can find the codepen for the original JavaScript code here. Below are my Angular files: index.html <!doctyp ...

javascripthtmlcssangulartypescript

The height of the Material UI Paper component is not appropriately matched with the parent component

I am currently working with the Paper component that contains a Card component, and I am trying to make its height fill the entire screen. To simplify the problem, I have provided the following code: import React from "react"; import { makeStyles ...

javascriptcssreactjsmaterial-ui

AngularJS datetimepicker integrated in the HTML script tag

<div class='input-group date' id='datetimepicker'> <input type='text' class="form-control" ng-model="ctrl.startDate" /> <span class="input-group-addon"> <span class="fa fa-calendar"></span> ...

htmlangularjsbootstrap-4datetimepicker

How can I set the text to be in the center of a VML

For my email template, I need to center text over an image. Although I attempted a solution from this source, the image is not being displayed. Below is the code snippet: <div align="center" style="margin: 0; padding: 0;"> <table border="0" c ...

htmlcssemailoutlookvml

What is the best way to make an image in a slider overlap a following div?

I've been struggling to make the images on the right side of the slider overlay the div underneath it. I've experimented with different position and z-index values, but nothing seems to work. Check out the live site here This is what I currentl ...

htmlcsssliderz-indexpositioning