The scroller's height is displayed at 100%

I'm experiencing an issue with the scrolling of a division. I've set the overflow to "scroll" for the division, but it's displaying at 100% height. Please refer to the screenshot provided. Can you advise me on which properties I should adjust in order to reduce the height of the scrollbar?

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

Answer №1

Include ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb in your CSS as well.

.terms-and-conditions-division {
        height : 420px;
        border:1px solid #36454F;
        overflow:auto;
      }

      .terms-and-conditions-division::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
      }

      .terms-and-conditions-division::-webkit-scrollbar {
        opacity: 0.7;
        background: #384552;
        width: 7px;
        border-radius: 10px;
      }

      .terms-and-conditions-division::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #555;
      }
      
<div class="terms-and-conditions-division"><p class="medata-terms-and-conditions-data">Your custom content here...</p></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

Styling the navigation bar using CSS

Currently working on establishing a top menu bar similar to StackOverflow, but with a fixed position for my webpage. Check out the JSFIDDLE Demo here Encountering extra space on the left and top of the menu bar. Seeking advice on how to eliminate this ex ...

Troubleshooting problem with CSS borders in Microsoft Edge Browser

I am currently working on implementing the concept found at the following link: https://www.w3schools.com/howto/howto_js_tabs.asp, but with the additional feature of borders around the elements. However, I have encountered an issue specifically with Micro ...

Validation issue with Reactive Forms not functioning as expected

My latest project involves a user signup component that I created from scratch import { Component } from '@angular/core'; import {UserManagementService} from '../user-management.service'; import {User} from "../user"; import {FormBuild ...

Executing a PHP function within the same file using AJAX: A step-by-step guide

I've been exploring online tutorials to learn about ajax as it's a new technology for me. My main goal is to understand how to utilize two functions, create() and population(), in a php file. The create() function generates a form like this: ma ...

Trouble with card alignment in Bootstrap

I've been experimenting with creating a grid layout using cards and utilizing ng-repeat for generating the cards. Unfortunately, I'm running into an issue where there is no spacing between each card, as depicted in the image. https://i.stack.img ...

"Utilizing JSON, jQuery, and HTML in web development

Is there a way to retrieve the index of a specific object from a JSON file? The following is an example of a JSON file content: [ { "time": "2017-04-11T22:31:50.3369265Z", "score": 0, "comment": "Meep meep! ", "handle ...

What is the best way to implement a scrollbar in a specific div rather than the entire window?

Hey everyone! So, I have this window in electronJS with a div where I'm dynamically adding elements using Javascript and the function --> document.createElement('section'). Here's the loop in Javascript to add these elements: for ( ...

What is the best way to customize the color of the icon in the <v-text-field>?

I have a <v-toolbar> component and I am trying to customize it by adding a search text field with a search icon in front: <v-text-field ...

Create two floating divs that adjust their height dynamically to be equal

Situation: I have a container with two direct children, known as "left" and "right". The height of the "left" child should never exceed the height of the "right" child. However, the "right" child can extend beyond the height of the "left" child. I am stru ...

Using jQuery to drag a div and drop it to swap out an image in a different

I am looking to implement a drag and drop function where I can move elements from one div to another, each containing different images. However, I want the image displayed in the second div to change based on the element being dragged. For example: When d ...

The link tag cannot be used inside a division element

I am facing an issue with a button that has three different states represented by images. While the button looks great and functions well, it fails to perform its primary function - linking to another document. Upon clicking the button, no action is initi ...

How to smoothly fade out content when hovering over a menu item in HTML<li> tags

Hi there, I have encountered a problem and could really use your assistance. I am attempting to create a menu that displays content when you hover over an li tag. The first content should always be visible when hovering over the first li option or if no l ...

JavaScript math validations not functioning correctly

This new project I've been working on involves presenting a multiplication problem and notifying the user if their answer is correct through an alert. The issue arises when the program incorrectly verifies the answers. Take a look at the code: < ...

What is the process for connecting controls to Canvas sprites?

Any input is EXTREMELY helpful! To put it shortly, I'm in need of assistance with utilizing HTML5/CSS3 buttons to manage sprite animations on my canvas. These buttons are responsible for controlling the direction and speed of the sprites independentl ...

"Discovering the secrets of incorporating a spinner into Angular2 and mastering the art of concealing spinners in Angular

When experiencing delay in image loading time, I need to display a spinner until the image loads completely. What is the best way to achieve this on the Angular 2 platform? <div id='panId' class="container-fluid" > This section ...

"Dilemma with Displaying a 3-Digit Number in DaisyUI Using Next.Js Countdown Component

Hey there, I'm encountering an issue with the countdown component on my Next.js website using daisyUI. When the number of days exceeds 99, it's not rendering correctly as shown below: Initially, I have a straightforward countdown setup: const t ...

Exploring JavaFX and FXML TreeTableView customization for column and header styles

I've been working on a JavaFX project and I'm having trouble customizing the style of the TreeTableView header or columns, like changing the color, width, font size, etc. I've tried using various codes like these but none seem to work. ...

Python Selenium encountering issue with selecting search bar

I have been attempting to use Selenium to search for courses on and scrape the results. However, all the selectors I have tried so far have failed, resulting in empty arrays when printed. I am confused as to why these selectors are failing and what is the ...

Swap out the hyperlink text for a dropdown menu when clicked and then revert back

Is there a way to dynamically switch between a label/text and a Kendo Combobox in a div using JavaScript when clicking on the text? The desired functionality includes: Clicking on the text displays the combobox, clicking away from it hides the combobox a ...

The correct way to modify the VB property name for display in Razor

My property goes by the name "UglyPropertyName" but in my view I wish to change its Display Name to "New Role" using @Html.DisplayNameFor(Function(model) model.UglyPropertyName) In C#, you can update the display name of a property by adding [Display(Nam ...