Tips for creating a custom Menu with content overflow in a single direction

What is the goal of this task?

  1. I have developed a custom Menu in my application with 8 options.
  2. There is a need to dynamically disable certain menu options based on specific conditions (e.g. disabling the last 4 options).
  3. When a user hovers over a disabled option, a popup should appear to explain why that particular option is disabled.

Challenges:

  • Since the number of menu options is variable, the menu must be scrollable to accommodate additional options, if needed.
  • The popup displayed when hovering over a disabled option may overflow beyond the boundaries of the menu.
  • This issue stems from the fact that having both overflow-x: visible and overflow-y: auto is not supported according to specifications.
  • Some solutions online suggest using absolute positioning to overcome this limitation, but it has not proven effective in this case.

Additional Resources:

  1. How do I enable scrolling only in one direction in CSS?
  2. Break out of overflow:hidden
  3. CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

I attempted to replicate the issue with a dummy custom menu: https://codepen.io/adiltan/pen/BaJJzOb

Although I tried implementing absolute positioning, I was unsuccessful in resolving the problem.

javascripthtmlcssoverflow

Answer №1

Utilizing the DOM method getboundingclientrect can effectively resolve this issue.
By using this method, you can obtain the exact placement of the selected element, eliminating the need to nest the tooltip within your menu.
Create a wrapper element to house your tooltips as direct children of the body and assign them the obtained placement from getboundingclientrect.

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

Exploring various queries in Firestore

Does anyone know if there is a way to create a sentence similar to this one: return this.db.collection('places', ref => ref.where("CodPais", "<>", pais)).valueChanges(); I have tried using != and <> but neither seem to be valid. ...

javascriptangulartypescriptfirebasegoogle-cloud-firestore

Analyzing Dynamic Content

Currently, I am engaged in content parsing and have successfully executed a sample program. To demonstrate, I have utilized a mock link which you can access below: Alternatively, you can click on this link: Click Here In the provided link, I have parsed ...

javajavascriptxpathjsoupweb-crawler

Javascript Snake: I am having trouble making my snake's tail grow longer

I've created a snake game that is almost fully functional. The issue I'm facing is that when the snake eats food, the food changes location but the tail of the snake doesn't grow in size. I suspect that my understanding of arrays might be la ...

javascript

The #each helper in Handlebars is used to iterate over an array

I have a function that generates an array as output. I am looking for a way to iterate over this array using the each method. Can anyone provide guidance on how to achieve this? Consider if the handlebars helper produces the following array: details: [{ ...

javascripthtmlhandlebars.js

Scale transformation causing text display problem in Firefox

Using css-transforms for scaling text on hover to another size is working smoothly in all browsers, except for Firefox. The font in the scaled element appears slightly unsharp initially, then sharpens after a few milliseconds. You can test and see this is ...

htmlcssfirefoxcss-transforms

Using the <li dir="..."> tag can cause list indicators to break

Is there a method to utilize dir tags for <li> elements without disrupting the list indicators? Logically, they should all align on the same side and RTL <li> elements in an otherwise LTR document should either be left-aligned if it's only ...

htmlcsshtml-listsdirection

Ways to divide the header column of a bootstrap 4 table?

Currently, I am delving into the realm of frontend development and facing a challenge with designing a table. My goal is to merge multiple columns into a single column by dividing them into cells. I am aware of the bootstrap classes colspan and rowspan, ho ...

htmlbootstrap-4tablecell

Keep the link underlined until a different button is pressed

I need help with a webpage that displays a list of partners organized by categories. When clicking on sidebar categories, the link remains underlined. However, if you click anywhere else on the page, the link becomes inactive. CSS: button:hover { t ...

javascriptjqueryhtmlcss

Activate a specific component of hover effect within multiple components generated by the `v-for` loop

Hey there! I'm currently facing a CSS challenge related to Vue. Let's say I want to display multiple components using v-for, and I want to add a hover effect to each component individually. The goal is to have the hover effect only apply to the c ...

cssvue.js

php$insert new field into mysql table using form insertcell

How do I insert a column in MySQL? I am struggling with the insertCell form. I have tried but I can't seem to add a MySQL column using my JavaScript code with PHP. I am familiar with Php PDO, but this seems difficult to me. Can someone guide me on ho ...

javascriptphphtmlmysql

Checkbox acts like radio buttons in JavaScript

Currently, I have a unique setup where a table is generated dynamically based on the user's selection from a dropdown. Within this table are three checkboxes per row, with a limit of 2 checkboxes that can be checked per row. The behavior of Checkbox ...

javascriptjquerycheckboxradio-button

Transmit information from JavaScript to a servlet and receive a response in return

I'm new to using ajax and JavaScript. Currently, I have a simple jsp page containing HTML and an accompanying JavaScript file with all my functions defined. One of these functions sends JSON data to a servlet and now I need assistance in receiving th ...

javascriptjqueryajaxjsonjsp

Creating a stylish Bootstrap 5 table featuring a large PRE block in a cell that is scrollable

I am currently working on formatting a table and I need some help figuring out how to achieve my desired layout. The issue I'm facing is with a cell that contains a large JSON object block. I want this block to either wrap within the enclosing TD, or ...

htmlcsstwitter-bootstrapbootstrap-5

Ways to retrieve the value of an Object that may have a key that is undefined

Is there a method similar to Angular's $parse service that can be used for accessing nested object properties? Consider an object structure like this: const obj = { items: [ { store: { type: '' } } ] }; Sce ...

javascriptangularjs

Concealing a message within a section that has been minimized to a width of 0

Recently, I've encountered a challenge in attempting to set the width of a section to 0 and have all its contents also disappear. Despite changing the section's width to 0px, the text inside continues to be displayed and even shifts off to the si ...

javascriptjquerycss

Utilizing Express.js for reverse proxying a variety of web applications and their associated assets

I am looking to enable an authenticated client in Express to access other web applications running on the server but on different ports. For instance, I have express running on http://myDomain and another application running on port 9000. My goal is to re ...

javascriptnode.jsexpressproxynode-http-proxy

State in Angular stubbornly refuses to switch despite condition changes

Here is the Typescript code, followed by the HTML: public verifySelection() { let choice = false; if (typeof this.formUser.permissionsTemplateID === undefined) { choice = true; } return choice; } <div class="form-group" ...

htmlangulartypescript

Tips for delivering a heartfelt message when a user adds an item

import React from 'react'; import { useForm } from "react-hook-form"; import { toast } from 'react-toastify'; const AddStorage = () => { const { register, handleSubmit } = useForm(); const submitData = data => ...

javascriptreactjsreact-hooksreact-toastify

Navigating through the maze of ES6 imports and dealing with the complexities

Currently, I am delving into React and creating my own components. However, the issue of project organization has arisen. Here is the structure of my project: Project_Folder - Components - Form - index.js - form.less - package.js ...

javascriptnode.jsnpm

Formatting Strings in JavaScript when saving as a .txt file with proper indentation

Utilizing Angular and TypeScript/JavaScript for testing purposes. Each row has been formatted with a newline at the end of the code. formattedStr += car.Name + ' | ' + car.Color + ' | ' + car.Brand + '\r\n' The da ...

javascriptangulartypescript