What is the method for creating two separate columns that can scroll independently?

I am faced with a challenge involving a modal that contains two columns. My goal is to make these columns scrollable independently of each other while ensuring the scrollbar remains hidden.

Thus far, I have managed to make the row scrollable with a hidden scrollbar, but achieving the same for the two columns has proven difficult.

Check out my progress on CodePen

Despite looking at similar questions that have been asked before, none of the solutions provided have been helpful.

How can i make 3 independently scrollable columns

How to create two independently-scrollable columns in a responsive grid?

Hide scroll bar, but while still being able to scroll

Update

The widget in question is part of an App we utilize, making it impossible for me to modify the styles of body, html, or the parent of container-fluid.

csstwitter-bootstrapbootstrap-4

Answer №1

I have a solution that may help with your problem. By using the CSS trick of overflow: hidden and adjusting the scrollbar with padding, you can hide the scrollbars. Here is the code:

.col {
  overflow: hidden;
}

.col-inner {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  padding-right: 30px;
  box-sizing: content-box;
}

-> View on Codepen.

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

Problem with displaying fonts in web browsers

I decided to create a React App using the Material UI library, but I wanted to customize it by changing the default font from Roboto to Overpass. I successfully imported the fonts using their library. <link rel="preconnect" href="https:// ...

htmlcssreactjsmaterial-uigoogle-fonts

Issue with Photoswipe pswp class Not Getting Properly Cleared Upon Closing Image

My website has a Photoswipe image gallery from . The issue I'm facing is that the CSS class does not reset or clear after closing the gallery for the second time. For example, when a user opens item 1, the images are loaded into the picture div via A ...

javascriptjquerycssajaxphotoswipe

What is the best way to ensure that the input areas stretch all the way to the edge of the screen?

This form is structured similar to Bootstrap: HTML: <div class="container"> <div class="row"> <div class="form-group row-group"> <label class="col-6">First name</label> <input class="col-6" type="text" v ...

htmlcssflexbox

Generate a container element that occupies the remaining space on the screen under a header of adjustable height

I'm trying to create a layout where the header height can vary, but the footer has a fixed height. I want the left nav and content sections to fill the screen height, with the left nav having a fixed width and the content taking up the remainder. Is ...

htmlcss

Unable to load CSS background image

As I develop a website for a fictional company to enhance my skills in HTML, CSS, and JavaScript, I am encountering an issue with loading my background image. If someone could review my code to identify the problem, I would greatly appreciate it. Check ou ...

javascripthtmlcsscss-position

Discover the best practices for integrating media queries using Radium within Material UI components

Having trouble applying a breakpoint to the Material UI component, Raised button. I have managed to make it work for regular divs, but not for the Material UI component. I attempted wrapping the button inside Radium import RaisedButton from 'materia ...

cssreactjsmaterial-uiradium

Tips for setting an image as the background on various mobile screen sizes

Is there a way to set an image as a background that will work effectively with multiple different mobile screen resolutions without distorting or cropping the image? For example, if I want the image to display correctly on both iPhone4 and iPhone6 without ...

htmlcssimage

The mouseover and mouseleave functions remain active even during window resizing

I wish to create a dynamic menu that appears when hovering over a user, but only if the window size is above 977 pixels. Take a look at my code below: $(document).ready(function() { $(window).on("load resize", function(event){ var windowS ...

jqueryhtmlcssjsfiddle

Adjust the background color of JQuery UI modal dialog overlay in real-time

How can I dynamically change the background color of a page when a modal dialog loads, specifically targeting only one specific modal dialog? Setting the background color with CSS works fine: .ui-widget-overlay { background-color: white; } Here's ...

jquerycssjquery-uimodal-dialog

Presentation and selection list

Here is the CSS code I am using: .nav li a { background-color:#000; color:#fff; text-decoration:none; padding:10px 15px; display:block; } .nav > li { float:left; } .nav li a:hover { background-color:#4db4fa; } .nav li ul { ...

htmlcss

What is the suitable condition necessary for optimal functionality?

Greetings all! I am a newbie in the world of development and also new to Stack Overflow. This is my maiden post seeking assistance on the following issue: $(document).ready(function() { $(".header").click(function() { if ($(".header-content"). ...

javascriptjqueryhtmlcss

Unique Text: "Personalized marker/pin for interactive map feature"

Looking to create a custom image map marker/pin with a unique bottom design resembling a union shape using CSS and Vue.js. I've attempted it myself but haven't been able to achieve the exact look as shown in the reference image. Any advice or ass ...

javascripthtmlcssvue.jsgoogle-maps-markers

Ensure that the URL is updated correctly as the client navigates between pages within a Single Page Application

Seeking a solution for maintaining the URL in a Single Page application as the client navigates between pages, with the URL changing in the background. I attempted using @routeProvider but it doesn't seem to be suitable for my situation. Any suggestio ...

angularjshtmlcssurl

Is it possible to personalize a select button for both iOS and Android mobile platforms?

I've implemented a dropdown on my website for the desktop version and it works fine. However, I want to replace this dropdown with a select button on iPad and iPhone, as I prefer how it looks on those devices. Is it possible to style the select butto ...

htmlcssmobile

How can I maintain consistent spacing between two areas in CSS3 across all screen sizes?

My question pertains to the alignment of an advertisement (on the left as a banner) and content sections on my website. I have noticed that as the screen size increases, the distance between these two areas also increases. How can I ensure that the distanc ...

css

Place a div in a location where it seems to be positioned beyond the main wrapper's width of 980 pixels

Is there a way to position a div outside the main wrapper (980px) of my website without causing horizontal scrollbars in the 1024px screen size? I'm open to solutions using CSS or jQuery. Any suggestions? The segment that needs to be outside should ...

jqueryhtmlcssxhtml

The process of displaying a Login form on the Home page

Is it possible to display the React bootstrap login form on the same home page without redirecting to a new /login page? Basically, I want to disable all current page activities (like clicking and scrolling) when the user clicks on the Login link, and onl ...

reactjsbootstrap-4react-bootstrap

The process of combining a CssStyleCollection with a System.Web.UI.WebControls.Style

I am working with a list item and trying to apply styles using System.Web.UI.WebControls.Style. However, I noticed that there isn't a MergeStyle option similar to what's available for controls. Instead, there is an Attributes.CssStyle property of ...

asp.netcsslistitem

In the realm of website design, the IE7 display

I am currently facing an issue with my gallery buttons when using IE7. The CSS code I have for the buttons is causing them to shift to the right hand side of the gallery, even though they work fine in other browsers. Here is the code: .prv_button{ flo ...

htmlcssinternet-explorer-7

Switching the cursor to an image when hovering over an element is causing inconsistency in hover events triggering

Currently, I am attempting to implement an effect that changes the cursor to an image when hovering over a text element and reverts back to the normal cursor upon leaving the text element. However, this functionality is not working as expected when using R ...

javascripthtmlcssreactjs