Step-by-step guide to activating vertical scrolling for select tiers in a multi-layered fly-out navigation

Currently working on a multi-level flyout menu to be integrated into a daterange picker for selecting time periods. Check out the jsfiddle link here: https://jsfiddle.net/6t72hd4x/1/

I attempted to set overflow-y: auto; in the .inner-list class to handle vertical overflow of the year list (https://jsfiddle.net/6t72hd4x). Unfortunately, this caused issues with horizontal overflow as the inner lists became invisible. Even adding overflow-x: visible did not solve the problem.

Is there a way to allow both inner menus and vertical scrolling to work simultaneously?

Just a note: I come from a backend development background with limited frontend experience, so my approach here may not be the best.

html css

Answer №1

If you prefer not to rely on javascript to determine "the year in which the quarter/month falls," a simple solution is to position the child elements of the overflowing container relative to the viewport (position:fixed;): https://jsfiddle.net/69yLp2fa/16/

Edit

Alternatively, you can use absolute positioning, but remember not to apply overflow and position to the same container. Instead, create a separate container for the overflowed element and apply positioning there, ensuring that the absolutely positioned child is not relative to the overflowing ancestor: https://jsfiddle.net/hg8rbksy/2/

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

The alignment of two responsive divs is off

My goal is to create two responsive columns of divs that stack on top of each other as the screen size decreases. The challenge I am facing is getting these divs to always be centered and sit next to each other, using only inline CSS. <div id="containe ...

css html

What is the best way to include a CSS stylesheet in a Wordpress theme?

Is there a way for me to properly load my custom CSS in Wordpress so that the dynamically inputted content on my pages matches the styling of my header and footer? In my functions.php file, I currently have the following code, but it only prints the code ...

css wordpress themes

Arrange two div elements side by side so they remain adjacent even when you adjust the browser size

After years of success with my floated left and right divs, I am now facing a challenge with responsive design. No longer able to rely on fixed widths, I find that when the screen size decreases, the right div moves below the left one. I know that using f ...

html css responsive-design

Is it possible to filter JavaScript Array while ensuring that select options do not contain duplicate IDs?

I am utilizing two datatables with drag and drop functionality. Each row in the datatables contains IDs. When I drag a row from table 1 to table 2, the data is stored in an Array. I have an addArray function that pushes the IDs into the Array, filters out ...

javascript html jquery bootstrap-4

Tips on incorporating a style-tag into the body of an Angular 5 application

We offer a service that collects a vast amount of data to be displayed in an angular 5 application. The model used for displaying this data is constantly evolving and shared across multiple applications, so I need to import it dynamically. My approach inv ...

css angular angular5

Utilizing absolute positioning with a rotated div element

The situation I am facing involves a parent div and child div. The child div is positioned absolutely with respect to the parent div and has been rotated by an angle of 90 degrees. Due to the fact that the origin is located at the center of the child div ( ...

javascript jquery css geometry transform

Unable to Toggle Bootstrap 5 Dropdown

Take a look at my code below. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor ...

javascript html css vue.js

Using HTML and CSS to evenly align text in individual sections

Is it possible to recreate the exact look and feel of a justified page from a book or article online using HTML/CSS? This would include replicating the text justification with precise line breaks and setting the outer wrapper width to match the min/max-wid ...

html css text render

Developing a feature that allows users to switch between different sets of information

I'm currently exploring a new project and attempting to design a toggle that switches between monthly and annual payments based on the user's selection, much like the functionality found here: . At present, I have implemented two sets of price c ...

javascript html jquery css vue.js

Using Three.js to create a distorted texture video effect

Check out the example linked here for reference: In this particular project, there are two cylinders involved - an outer cylinder with an image texture and an inner cylinder with a video texture. Once the second cylinder is created and added to the scene, ...

javascript html three.js html5-video

The numbering in the list does not align vertically with the corresponding content

I am attempting to create an ordered list with collapsible sections inside the li elements. The goal is to display basic information about a specific context, and when clicking on a link, additional details are shown. While the code is functional, I am fac ...

css twitter-bootstrap bootstrap-5

Switching from HTML to BBCode during the editing process

My issue lies in converting BBCode to HTML and then editing the code on a page with AJAX. When editing in a <textarea>, the HTML tags show up instead of the original BBCode. For instance, if I submit [b]bold text[/b] and save it to my database, the ...

javascript php html ajax

Flex children do not adhere to max-height and max-width properties

There seems to be an issue with setting the max-width and height for flex children. The div is getting squished down to fit its children exactly, possibly due to the styling associated with div .content. It's not clear why this is happening. The divi ...

html css flexbox

I am interested in creating an input range slider using React and TypeScript

This code was used to create a slider functionality import { mainModule } from 'process'; import React, { useState } from 'react'; import styled from 'styled-components'; const DragScaleBar = () => { const [value, setV ...

javascript html reactjs typescript frontend

What is the overlay feature in Material-UI dialogs?

I recently started using the React-Redux Material-UI package found at http://www.material-ui.com/#/components/dialog My goal is to implement a grey overlay that blankets the entire dialog element, complete with a circular loading indicator after the user ...

css reactjs typescript react-redux material-ui

Is there a way to access the body html element within a template in vue.js?

I'm struggling to add styles to the body element of my HTML page. It seems like I can't access it directly from the template because there's another body element nested inside the main body. Even when I try to change the style using JavaScri ...

javascript html vue.js

The jQuery function fails to execute when the script source is included in the head of the document

I'm relatively new to working with scripts and sources, assuming I could easily add them to the header and then include multiple scripts or functions afterwards. Everything seemed to be working fine at first, but now I've encountered a problem th ...

php javascript jquery html api

Ways to modify font color in JavaScript "type"

Recently, I came across a fascinating technique where by simply refreshing the page, the text changes sentences. I managed to implement the code successfully, however, I am having trouble changing the color, size, and alignment of the text. <script type ...

javascript html css

Removing nested divs using JavaScript

My website has a nested div structure which contains multiple child divs. Here is an example of the div structure: <div id="outside-one"> <div class="inside" id="1"></div> <div class="inside" id="2"></div> <div ...

javascript jquery html css

JavaScript salary calculation function not functioning properly

Once the user inputs the employee's name and the number of hours they worked on the HTML form, the submit button captures this information and stores it in variables for calculating their pay. The script also factors in overtime pay. Despite feeling l ...

javascript html function

CSSer Q&A