The horizontal scrollbar is not displaying

(RESOLVED)

Currently, I am developing a movie app that displays film titles through an Accordion feature using Bootstrap. Specifically, I have created an Accordion that showcases movies added to a favorites list.

The intention is for this favorites section to be scrollable from left to right. To achieve this in the CSS code for .accordion-body, I included the following:

.accordion-body {
  background-color: var(--primary-bg);
  width: 950px;
  margin: 0 auto;
  border: none;
  overflow-x: scroll;
  display: flex;
  border: 2px solid var(--primary);
}

VIEW SCREENSHOT However, despite the setup, the scrollbar does not visibly appear on the screen when scrolling with a mouse cursor. It only shows up if I physically touch and scroll my laptop's screen with a finger. I require assistance in resolving this issue to ensure proper visibility of the scrollbar. Thank you!

htmlcssbootstrap-5

Answer №1

It seems that the value for the overflow-x parameter was not correctly assigned and should be one of the following options:

overflow-x: visible|hidden|scroll|auto|initial|inherit;

Based on this, a suggested answer could look like this:

.accordion-body {
  background-color: var(--primary-bg);
  width: 950px;
  margin: 0 auto;
  border: none;
  overflow-x: scroll;
  display: flex;
  border: 2px solid var(--primary);
}

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

Move the absolute div by sliding it to the left from 120% to -10px

I want to move an absolute positioned div from the left side of the screen to -10px on button click. Here's my attempt so far, but it's not working as expected. Javascript/jQuery $('.button').click(function() { $(this).parent().f ...

javascriptjqueryhtmlcss

Trouble with HR functionality in Outlook email

<table> <tr> <td class="h1" colspan="12" style="font-family: 'proxima_nova_rgbold', Arial, Helvetica, sans-serif;font-size: 18px;text-align:center; padding-top:10px;padding-left:30px;text-transform: uppercase;padding-bottom: 8 ...

htmlcsshtml-table

Tips for transitioning from custom CSS to Material UI's CSS in JS

I came across a project where someone implemented components with custom CSS. One interesting thing I noticed was a wrapper component, similar to Material UI's Container or just a simple div with applied styles. export const Container = styled.div` ...

javascriptcssreactjsmaterial-ui

What is the best way to eliminate all styles from an element with jQuery?

body{ font-family: Arial; } div{ color: red; margin: 20px; background: blue; font-size: 17px; } <div id="div1">this should be styled with a blue background, red text, and 17px Arial font</div> <div id ...

jqueryhtmlcss

Conceal a child div through the use of AJAX technology

Utilizing AJAX, I am loading pages on my website. Each page consists of two common div elements - the header div and the content div. When navigating from one page to another, I load the content div of the next page into the current page using the followin ...

javascripthtmlajaxback-button

When you click on the input field, a file manager window will open. You can then select a file and the URL of the selected file will be automatically added to the

I need assistance with customizing the code to open the flmngr window and add the URL of the selected file to the input field when onclick. window.onFlmngrAndImgPenLoaded = function() { var elBtn = document.getElementById("btn"); // Style bu ...

javascripthtmljquery

``Considering the compatibility issues with position: absolute in Internet Explorer 8

Here's an example snippet of code in HTML: <form> <input type="file" id="iefile"> </form> <form> <input type="file" id="iefile"> </form> This is how it looks with some CSS styling: form{ position:rela ...

htmlcssinternet-explorer-8

Is there a way I can create a slight gap between the icon and the text in this area?

After learning Reactjs and JavaScript, I have encountered a problem that I need advice on. In the image provided, the "Sign in" text does not have proper spacing between the icon and the text, unlike the other menu items. https://i.stack.imgur.com/b663b. ...

htmlreactjs

Monitor the incoming POST request

Is there a way to monitor incoming post requests in a form? I have the following form: <form method='post'> <input type='text' name'test' /> <input type='submit' name'submit' /> </for ...

phphtmlforms

Place the border image underneath the div element

I successfully added a border image to the right side of my div, but now I want it to extend slightly below the div. Is there a way to increase the height of the border image? Or should I just float the image next to the div and how would I go about doing ...

htmlcssborder

Surprising automatic scrolling upon pressing the keydown button in Bootstrap

My webpage appears normal with the Bootstrap framework, but whenever I press the down key, the screen scrolls down and displays unexpected white space due to reaching the end of the background-image sized at 1798px * 1080px. Please refer to the image: htt ...

javascriptjqueryhtmlcsstwitter-bootstrap

Adjust the size of my navigation bar to match the dimensions of the browser

I'm currently facing an issue with my website's navigation menu on mobile devices. I've been attempting various solutions to make the navigator scale up appropriately with the browser, but so far nothing seems to be working. Below is the HT ...

htmlcssmedia-queries

I'm having trouble with the colors not displaying correctly on my NextJS Tailwind navbar

I've encountered an issue with my navbar where none of the specified colors are being displayed. The code snippet for the navbar is as follows: Codes: 'use client' import Head from 'next/head'; import Link from 'next/link&apo ...

javascriptcssreactjsnext.jstailwind-css

Revising Division Based on Input Number

I need to update a div every time the number input is changed. The number input looks like this: <input type="number" name="year" id="year" min="2013" value="2013"> Although I tried adding some code for this, it doesn't seem to work. Can anyo ...

htmlajaxjquery

The scroll feature in JavaScript is malfunctioning

After countless hours of troubleshooting, I still can't figure out why the code snippet below is not working properly on my website at : <script> $(window).scroll(function () { if ($(window).scrollTop() > 400) { ...

javascriptjquerycssscroll

extracting an attribute from a class's search functionality

Let's consider the following HTML structure: <div id="container"> <div> <div class="main" data-id="thisID"> </div> </div> </div> If I want to retrieve the value inside the data-id attribute ...

javascriptjquerycss

Storing various text inputs in a MySQL database

Could anyone please assist me with fixing an issue I'm having with inserting data into a database from the form provided below? Unfortunately, I am unable to get it to work as expected. Here is the complete form: <html> <head> <m ...

javascriptphphtmlmysql

I am experiencing difficulty with the color of my progress bar in Firefox

After successfully creating an interactive progress bar that works perfectly in Google Chrome and surprisingly also in Safari without vendor prefixes, I encountered a roadblock when testing it on Firefox. The progress bar color reverts back to the default ...

javascriptcsshtmlfirefox

Using PHPMailer to send attachments uploaded through a form

I have a HTML form where users can select an attachment file (such as a PDF) and I want to send that file via email to a specified destination. While I am able to successfully send all other inputs through email, I'm having trouble with the attachmen ...

phphtmlphpmailer

Is there a way in Angular Material to consistently display both the step values and a personalized description for each step?

Is there a way to display both numerical step values and corresponding custom text in Angular Material? I prefer having the number at the top and the descriptive text at the bottom. Check out this image for reference: https://i.stack.imgur.com/LGMIO.png ...

javascripthtmlcssangularangular-material