Scrolling horizontally with visible vertical overflow is causing the contents of an absolutely positioned div to be hidden

Note: I have thoroughly searched related questions on stackoverflow and this is not a duplicate question.

In my code, I have a `div` with `overflow-x: scroll`, but I want the content in the `div` to be visible in the `y` direction. The issue I'm facing is that when the `y` overflow occurs, the content inside the absolute-positioned `div` gets hidden.

Below is a simplified version of the HTML and CSS structure I am working with in ReactJS:

/* CSS code snippet */ .zooming-bar { /* CSS properties */ } .scrollable-bar { /* CSS properties */ } .buttons-block { /* CSS properties */ } /* more CSS properties... */ /* HTML code snippet */ Example code

I am looking to make the content inside the `.zooming-bar` fully visible despite the overflow. How can I achieve this while keeping `overflow-x` as scroll and `overflow-y` as visible?

Refer to the screenshot for the desired look of the popup with working scroll:

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

Important: I need the hidden part of the popup to overlap the above content without adding extra padding or margin to any related divs.

javascripthtmlcssreactjs

Answer №1

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .zooming-bar {
        width: 100%;
        padding: 2px 0;
        background: hsl(0, 0%, 40%);
        position: relative;
        cursor: move;
        display: flex;
        z-index: 2;
        height: 100px;
      }

      .scrollable-bar {
        width: 100%;
        cursor: pointer;
        margin: 0 auto;
        position: relative;
        top: 30px;
        display: flex;
        flex-direction: column;
        height: 25px;
        margin-left: 0;
      }

      // Other CSS styles...

    </style>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example code</title>
  </head>
  <body>
    <div class="overflow">
      <div class="test">
        <div class="content-pane">
          <div>Content1</div>
          <div>Content2</div>
          <div>Content3</div>
          <div>Content4</div>
          <div>Content5</div>
        </div>

        // Other content...

      </div>

      <div class="zooming-bar">
        <div class="scrollable-bar">

          // Buttons blocks...

        </div>
      </div>
    </div>
  </body>
</html>

This is a customized version of the provided code with some modifications. The structure has been rearranged and certain attributes have been adjusted for better clarity and functionality. Please review and let me know if you need further assistance or changes.

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

issue with mongoose virtual populate (unable to retrieve populated field)

During my project using mongoose with typescript, I encountered an issue with adding a virtual called subdomains to populate data from another collection. Although it worked without any errors, I found that I couldn't directly print the populated data ...

javascriptnode.jstypescriptexpressmongoose

What is the purpose of deserializing the user for every request using PassportJS?

While I have scoured the official documentation and various online resources, I am still unable to find a solution to what seems like an obvious question. When working with Passport.js, it is necessary to define two methods - one for serializing and one f ...

javascriptnode.jsexpresspassport.js

How can I implement a Dynamic Input field using Angular?

Suppose there is an input field where a user enters an ID. Once the user clicks the "add" button, I need to send a request to my server to fetch a "name". Afterwards, I want to disable the text input field, hide the "add" button, and show a number input fi ...

javascripthtmlangularjsangular-ui

Phonegap application functioning smoothly on computer, encountering issues on mobile device

Hey there! I recently developed a phonegap app that retrieves JSON data from a YQL link and presents it to the user. It works perfectly on Google Chrome desktop, but my client mentioned that it doesn't work on his Android 2.3 device. Could you help me ...

javascriptandroidhtmlcordova

Update the specific component according to the identified modifications

In my project, I have two simple components: parent and child. The parent component contains an Array and for each element in the array, it renders the child component. parent.component.ts export class parent implements OnInit { data: CustomType[] = [ ...

javascriptangulartypescript

Issue of delayed loading of CSS in Vue.js application

My vue PWA is experiencing slow loading of CSS when using Vue Bootstrap and Buefy. I attempted to use V cloak, but it only hides components milliseconds after the raw HTML is briefly displayed without any CSS applied. I am looking for a method to display ...

cssvue.js

Adjust the background color within the border-radius of a designated element

I am currently working on adding a border radius to the bottom of my sections. The background color of my body is set to black. My goal is to have the color under each border-radius match the background-color of the next section, instead of the overall bod ...

htmlcssuser-experience

Can someone guide me on incorporating Material UI theme colors into a div?

I have developed a library that incorporates Material UI components, which automatically adjust their colors based on the theme of the project they are installed in. Now I want to apply the "primary" and "secondary" colors to a div element so that the back ...

reactjsmaterial-uistyled-components

Unable to set initial values for Select Option in Redux-Form

I have implemented an update form using redux-form, where the form value is initialized using initialValues. For example: <DataEdit initialValues={ Data }/> The form in the DataEdit page looks like this: <Field name="Data.taxTitle" comp ...

javascriptnode.jsreactjsreduxredux-form

Update the key names in an array of objects using the value from the first element of the array

I am working with raw json data extracted from a .csv file: [{ "A": "CustomerCode", "B": "Country", "C": "CountryCode" }, { "A": "C101", "B": "AUS", "C": "AUS01", }, { "A": "C102", "B": "AUS", "C": "AUS02", }] Is there ...

javascriptarraysjsonecmascript-6

How much do npm packages actually weigh?

Looking to enhance a profile page with an image carousel that allows users to view images in fullscreen mode via a modal. To achieve this, I may need to import the carousel twice: once within the profile component and again when the modal is activated. Th ...

reactjsperformancenpmwebpack

The PHP Comet feature is causing the page to experience delays in reloading

Hello, I am working on implementing comet functionality using PHP and jQuery. The comet starts with every page load, but this seems to be causing a significant delay in loading any page on the website, taking about 10 seconds. It appears as though the page ...

javascriptphpjqueryajaxcomet

Why is JavaScript unable to fetch JSON data from C when the uint32 value is a multiple of 256 plus 10?

After receiving some helpful feedback, I decided to make some changes to this question that I posted yesterday. The title and content have been edited for clarity based on the new information I've learned. Recently, I've been utilizing C code to ...

javascriptcjson

Using Java script to parse and interpret a JSON file

I have a JSON file that follows this structure. Being new to JavaScript, I am looking for guidance on how to extract each key and its associated value. Can someone help me understand where to begin? AuthServer.Web": { "stuff": { "evenmore st ...

javascripthtmljson

Retrieve elements from a separate pom file

I am looking to organize my web elements by defining them in a separate js file from my test file using Protractor. In my pom.js object, I have set up the following: let web_elements = function() { this.get_login_mail, function() { ...

javascriptangularautomationprotractorpageobjects

Exploring the Differences in Table Resizing between IE8, IE7, and Chrome when using table-layout:fixed

For my HTML timeline view, I encountered an issue that I'm hoping to resolve: I have a table row with 12 cells representing the 12 months, each with a colspan based on the number of days in that month. Another row in the same table contains the indiv ...

htmlcsshtml-tableinternet-explorer-8resize

Are you delving into the realm of reduce functions in order to grasp the intric

Currently following this particular tutorial where they utilize the reduce method to transform an Array<Student> into a { [key: string]: Array<string | number> }. The tutorial includes this expression that caught my attention. It's quite n ...

javascriptnode.jsangulartypescript

Finding the webpage URL where a form element is located

Suppose I have two pages called a.php and b.php, each with a form-tag. Both of these forms have the same action attribute set to c.php. Is there a way to determine in c.php which form (from either page a or b) triggered its submission? Using a hidden inpu ...

phphtmlformspost

Error in Dimplejs: Line is not visible when series is empty

I have a dimplejs.org line chart set up. I am trying to colorize the Clicks data points from blue to red (blue for fewer clicks and a gradient from blue to red for more clicks). When I set the series as shown below, it works fine but the tooltip only incl ...

javascriptjqueryd3.jsdata-visualizationdimple.js

Guide to triggering an API call upon changing the value in a Vue Multiselect component

Is there a way to trigger an API call when the value changes in a Vue Multiselect component? I want to update the value in the multiselect, make an API call, and display the result in the console. Below is my code snippet. <template> <div> ...

javascriptvue.jsvuejs2vue-component