SOLVED: How to utilize CSS to confine scrollbars within nested div elements

As a novice in web programming, I am currently working on a userscript to add hotkeys to a website. I am using Firefox on Linux for this project, focusing solely on desktop functionality. Right now, my main focus is on enhancing the pop-up help view, which includes a dialog element with basic instructions like "Click on the tabs" and "Hit ESC to close." The dialog also features tab views with a table listing keystrokes, simple documentation, and a textarea for error messages.

In this instance, I am particularly concerned with the issue of scrolling within the dialog. I have experimented with various CSS properties like box-sizing, overflow, height, and positioning to contain the scrollbars within the tab panels while keeping the headers visible. Despite trying different combinations of values, the scrollbars have appeared on both the dialog and the nested panels.

The code example provided is a simplified version for reference. Any guidance on how to achieve the desired scrolling behavior would be greatly appreciated. Additionally, suggestions on how to make the textarea fill the third panel entirely are welcome for future reference.

Update 2023-09-06: After incorporating some changes to the CSS, the example now demonstrates the desired scrolling behavior without using the calc() function. I am still exploring ways to improve the layout and functionality of the dialog further.

Update 2023-09-06 #2: The recent updates have led to the dialog functioning as intended, removing the need for the calc() function. I am still puzzled by the use of height: 0 in achieving this result.

Update 2023-09-06 #3: Discovered a bug related to the display property in the dialog's style, which I addressed by utilizing the :modal pseudo-class. The demo now includes a button to show the dialog on demand.

Update 2023-09-06 #4: A refinement in the approach involved eliminating the wrapper div.panels, allowing each tab to have its own scroll state. This adjustment also resolved conflicts with CSS applied to the textarea element. The demo has been updated to reflect these changes for better user interaction.

htmlcssscrollbar

Answer №1

After some experimentation, I was able to solve the layout issue without resorting to using the calc() function. It appears to respond well to changes in the browser window size.

I ultimately implemented nested flexboxes to achieve the desired structure.

To begin, I made the dialog element a column flexbox.

The .container class was given a flex-grow: 1 property within that flexbox, while it itself was also set as a column flexbox.

One notable obstacle I encountered was ensuring that the panel content stayed within its designated space. I discovered that by default, flex items (such as the panel in this scenario) do not shrink to be smaller than their content. This issue was resolved by incorporating one of three settings into the container's style: height: 0, min-height: 0, or overflow-y: hidden. Additionally, changing the container to have a flex-direction: row would necessitate modifying these settings to adjust for width instead. I suspect that the height variations also impact the default flex-basis, although I have yet to delve into that aspect.

For further insights, refer to this Stack Overflow response.

Most importantly, this approach was successful in my actual application!

The only drawback I noticed was that when switching between tabs, certain tabs displayed scrollbars while others did not, leading to inconsistent panel text widths. To address this, I am contemplating changing the overflow-y: auto property to overflow-y: scroll; height: 100% to consistently display the scrollbar at a set height.

I initially intended to provide a rough outline here, but upon reflection, I believe the existing example in the initial question suffices.

This solution relies solely on CSS. JavaScript is solely utilized for constructing the content (given my userscript implementation). The selectors used to link the input elements to their corresponding label and div elements may seem verbose, but they are at least uniform across both components. Scrollbars are only present in the panels, while the headers and footers remain fixed. During the drafting of this response, I updated the demonstration to incorporate footers. Additionally, each panel can accommodate entirely distinct content types.

In my practical scenario, I opted to utilize a section element for the container instead of a 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

How to target specifically images contained within anchor elements using jQuery?

I am looking for a way to select only images that are inside links, so I can add the rel="lightbox" attribute to those links. I have attempted to achieve this using 2 loops but it is not working as expected because it also adds the rel attribute to normal ...

jquerycss

What is the best way to ensure DIVs or SPANs have a fixed width with their content while also utilizing the remaining available space with white space?

My current setup is similar to the following. <div width="100%"> <span width="33%">FIRSTNAME</span> <span width="33%">|LASTNAME</span> <span width="33%">|CITY</span> </div> When executed, it appears a ...

htmlcssfreemarker

Angular is known to raise the error ExpressionChangedAfterItHasBeenCheckedError

I am currently developing an Angular application using Angular version 7.0.4. My objective is to automatically set focus on the first input element of a modal if the list of working times contains more than one element. However, I am facing an issue where ...

htmlangulartypescript

Restricting Horizontal Scrolling in Dash DataTable with multi-tiered header (without any additional empty gaps)

I'm currently developing a Dash application using Plotly that showcases two tables, specifically dash_table.DataTable, each with multiple columns. The initial table features a multi-level header. For both tables, the first few columns are fixed while ...

pythoncssplotly-dash

Modifying the appearance of Bootstrap 4 Nav-tabs using CSS

I have implemented Bootstrap 4 Nav-tabs as shown below: <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" ...

cssbootstrap-4tabs

I attempted to implement a CSS and Typescript animation for a sliding effect, but unfortunately, it isn't functioning

So I'm encountering an issue with this unique ts code: {/* Mobile Menu */} <div className="lg:hidden"> <button className="flex items-center w-8" onClick={toggleMenu}> {isMobileMenuOpen ? ( ...

cssreactjstypescriptcss-animations

`Changing the iframe content dynamically with next and previous buttons: a step-by-step guide`

function displayPDF(fileSlNo){ var data = { pageMode: "PDF_DISPLAY", fileSlno: fileSlNo }; var d = $.param(data); var request = $ .ajax({ type: "GET", url:"folderNavigation.do?"+d, dataType : "TEXT", success: functio ...

jqueryhtmlajax

What strategies can I use to reduce duplication in my HTML and JavaScript code?

Struggling with messy HTML and JS code? If you're using Bootstrap-3 and jQuery-1.11.0, dealing with dropdowns might be tricky. Especially when it comes to switching icons based on the dropdown state and ensuring only one dropdown is open at a time. Is ...

javascriptjqueryhtmltwitter-bootstrapdry

Injecting external HTML into a Razor view with Html.Raw is causing the page's HTML to display incorrectly

I have a separate external HTML file, which serves as the body of an email. This HTML file contains all necessary tags and elements for a complete HTML structure. I am trying to display this email content inside a Bootstrap modal. <div class="moda ...

htmlasp.netasp.net-mvcrazor

Having trouble with Tailwind CSS not functioning correctly once the font is imported?

I am currently working on a next.js project and utilizing tailwind for styling. I have noticed an odd behavior when importing a custom font into my globals.css file. page.jsx "use client"; import React from "react"; const page = () = ...

cssnext.jsbackgroundtailwind-css

Position the text on the left side while also centering it within my div

I am attempting to center align some links within my div, while also ensuring that the text of the links is aligned to the left. However, I have been unsuccessful in achieving this. I can either align them to the left or center, but not both simultaneousl ...

htmlcssalignment

Creating a border and transparent space within a CSS triangular design

I am looking to create a unique design element for my website using CSS. The pattern I want to achieve involves a triangular cutout separating two sections of the page: https://i.sstatic.net/08BL0.jpg After exploring the skewX() technique detailed in thi ...

cssbordercss-shapesskew

The CSS Media Query won't be effective for a precise 767

I have created an HTML file that changes the background color based on the browser width. When the width is 769, the background color is set to white. At 768, it changes to green. However, when the width is 767, I expected it to become red but it still rem ...

cssmedia-queries

Creating a looping animation on multiple elements using jQuery that makes them fade in and out at different intervals

I am currently working on creating a fade in and out animation for multiple elements using jquery. It's a bit complex to explain, so I will start by sharing the relevant code. $(document).ready(function() { $("#1").delay(0).animate({ ...

javascriptjqueryhtmlcss

Tips for setting up nextjs with typescript to utilize sass and nextjs font styles

I am attempting to configure a Next.js TypeScript app to work with Sass and a font in Next.js. I have been following the steps outlined in this article. Without the font module, styles are working correctly. Below is my next.config.js without the font co ...

csstypescriptsass

The table is too large for the parent div in which it is placed, causing

Check out this example I have for putting a table in a div and making it fill the div: ex1_jsfiddle table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; height: 100%; table-layout: fixed; } td, th { border: 1px sol ...

htmlcss

Pull data from one array of objects using the id from another array to display in a list using AngularJS ng-repeat

After retrieving a list of options, I make an API call to validate each option. The goal is to display whether each option is valid or not. My starting array looks like: $scope.preValidationArray = [ { id: 1, description: 'Item 1' }, { id: 2 ...

javascripthtmlangularjs

Abundance of DOM elements - the difference between hidden and display none

When I have numerous DOM elements on my page and assign them all a display: none property, the browser continues to perform quickly (smooth scrolling and snappy page response). But if I hide the elements using visibility: hidden instead, the browser slows ...

htmlcssdom

Web Page Content Scrambling/Character Exchange

I've encountered a perplexing issue that seems to strike randomly, yet I've managed to replicate the problem on three different desktops. Oddly enough, some other desktops never experience this issue and I'm at a loss as to what could be cau ...

javascriptphphtmlgoogle-chrome

What is the best way to center align all elements using a wrapper in CSS grid?

I am working on designing a layout that looks like this: https://i.sstatic.net/jAaXL.jpg I have set the wrapper as a class and aim to center everything on the screen. Aside from the wrapper, I also want to make the text and form equal sizes. Here is th ...

htmlcsscss-grid