Centered dropdown positioned under parent element with hidden overflow

In my navigation bar, I have a link that opens a dropdown when clicked. The parent of this link has the CSS property overflow: hidden in place to truncate the text if it becomes too long. However, I am facing an issue where the dropdown is not positioned correctly when the parent's width changes dynamically. The dropdown ends up getting cut off due to the overflow property.

Is there a way to fix this using CSS only? I prefer not to resort to using position: fixed and manipulating margins with JavaScript as a solution.

You can view a simple example in this fiddle here

Thank you for your help!

javascriptjqueryhtmlcss

Answer №1

Regrettably, CSS does not provide a way to display the contents of a child element with overflow:hidden outside of its parent's borders. In order to achieve this effect, you will need to adjust the hierarchy.

If rearranging the structure is not feasible, one workaround could be adding padding to the bottom of .nav-pull-left that matches the size of your dropdown, although this solution may not be ideal.

.nav_pull_left {
  width:auto;
  height:50px;
  padding-bottom: 80px;
  overflow:hidden;
  float: none;
  border: 1px solid black;
  white-space: nowrap;
}

Alternatively, you can utilize JavaScript to dynamically adjust the height of the parent container when the dropdown menu is visible. However, restructuring the hierarchy remains the recommended and cleanest approach.

If you opt for the hierarchical adjustment method, feel free to reach out for assistance :)

Answer №2

Allow me to propose the following solution, where you adjust your CSS code as shown below.

.nav_pull_right {
  min-height:50px;      /* changed height to min-height */
  ...
}

.nav_pull_left {
  min-height:50px;     /* changed height to min-height */
  ...
}

.my_dropdown {
  position: relative;  /* changed absolute to relative */
  margin: 0;
  margin-left:-87px;
  /* top: 2em; */      /* removed top */
  left: 50%;
  width: 170px;
  z-index: 99999;
  border:2px solid #929292;
}

By making these adjustments, your container overflow will be controlled and the drop-down menu will be centered on the page.

Do you think this solution would be helpful for your needs?

Check out this live demo on JSFiddle

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

Different content can be utilized with a single JavaScript code in a Django template by customizing and adapting the code

Working on a web application using Django has presented a challenge. I created an HTML template in Django and embedded JS code for that template as well. The goal is to use this JS code for various types of content displayed with the template, but it' ...

javascripthtmldjangolocal-storage

Results don't align with search parameters

const searchClientes = (event) => { if (event.target.value === '') { getClientes(); return; } else { const searchTerm = event.target.value; const filteredClients = clientes.filter(cliente => { return cliente.nome ...

javascriptreactjsfirebasenext.js

Utilizing Asynchronous Functions within a Loop

I have a situation where I am working with an array and need to make API calls for each index of the array. Once the API call is resolved, I need to append the result in that specific element. My goal is to ultimately return the updated array once this pro ...

javascriptreactjsasync-await

Content and picture within a <button> element do not align on the same row when using flexbox in Firefox browser

I need assistance in aligning a button with an image and text in the center of the same row. However, in Firefox, the image and text appear on separate lines. How can I resolve this issue? This is my current code snippet: button { display: inline-fle ...

htmlcssflexbox

I utilized Bootstrap to validate the form, however, despite the validation, the form is still able to be submitted. What steps can I take to

I have implemented form validation using Bootstrap's 'needs-validation'. However, I am facing an issue where the form still gets submitted even when the validation fails. What I want is for the form submission to be prevented if the validati ...

javascriptjqueryhtmljinja2

Using Three.js: applying a gradient color to points

In my project using threejs, I am working on creating and rendering a point cloud. One of my goals is to assign each point a specific color based on its Z coordinate. Ideally, I want the color to follow a gradient approach starting from green for the small ...

javascriptthree.js

Mastering the ng-if directive in Angular can help you easily display or hide content based on boolean

Having trouble figuring out what to insert in the last span element where it mentions "I_DO_NOT_KNOW", here is the markup provided: <div class="row"> <div class="key" translate>Label</div> <div class="value form-group"> < ...

javascriptangularjs

Achieving a Banner-Like Background Image Using CSS

I've been studying various website source codes, but I'm struggling to achieve a specific effect. I want to have an image as the background that sits behind everything on the page. However, I don't want the entire background to be covered by ...

htmlasp.netcss

Is it Possible to Load Images Without Using Javascript?

When I hover over certain links on my HTML pages, large images are displayed but take a while to load. I prefer not to use JavaScript to preload the images. Are there any alternative solutions available? ...

htmlimage-preloaderlink-prefetch

What are the disadvantages of using getBoundingClientRect() in ReactJS?

I recently incorporated the getBoundingClientRect() method into my project. However, a fellow React developer expressed concerns about its browser compatibility. In theory, shouldn't Webpack or Babel handle such compatibility issues? ...

javascriptreactjsdom

Tips on dividing the information in AngularJS

Sample JS code: $scope.data={"0.19", "C:0.13", "C:0.196|D:0.23"} .filter('formatData', function () { return function (input) { if (input.indexOf(":") != -1) { var output = input .split ...

javascriptangularjs

What is causing the action button in my MUI snackbar to occupy an additional line?

I'm currently learning how to use MUI and I'm struggling with a specific issue. The close button in my code is appearing on a separate line, but I want it to be on the same line as the word "again". I've tried experimenting with absolute pos ...

cssreactjsmaterial-uijsxsnackbar

Deciphering complex JSON structures in angular2

Using Angular5, I am handling JSON data retrieved from an API. The structure of the data is as follows: { Cars: { BMW: { M3: { description: 'BMW M3 car description' features: [ { nam ...

javascriptjsonangularngfor

The local storage is empty

I've encountered an issue with localStorage. Here is a snippet of my code: var defaultReportData = { 'station': 'DR P3', 'days': 'Mon, Tue, Wed, Thur, Fri', 'startHour': '06:00', &ap ...

javascriptjsonlocal-storage

Modify the title of the HREF hyperlink

Here is a link I have created: <a href="example.com" id="example1"> Go to example....</a> I am wondering if it is possible to use PHP and jQuery to change the text from "Go to example..." to "Go to example One" when the cursor hovers over it. ...

phpjqueryhrefmouseover

Switch language by entering a specific URL (VueJs)

I have successfully integrated localisation using vue-i18n. In my main.js file: import Vue from 'vue' import { i18n } from './plugins/i18n' import Cookie from "vue-cookie"; if (!Cookie.get('locale')) { Cookie.set(' ...

javascriptvue.jsvuejs2

Vue Google Maps - The JavaScript API encountered an error with loading from Google Maps: NotLoadingAPIFromGoogleMaps

Hello, I am currently facing an issue trying to add my API key to my Google map. Initially, everything worked fine when I used the string version of the key. However, I prefer to keep the key in my .env file. When I made this change, I encountered the Goog ...

javascriptvue.jsgoogle-mapsgoogle-maps-api-3

My website is experiencing issues with the inner border being transparent and not displaying correctly

I have encountered an issue where the inner border only appears transparent on a single page or JSFiddle, but for some reason it is not working on my website. Can anyone offer any assistance on what might be causing this problem? The border is displaying ...

javascripthtmlcss

Unexpected issue on AngularJS application

Encountering issues with incorporating a controller into my page - each time I add it to a DOM element, an error is thrown. Here's the structure of my HTML page: <html data-ng-app="sportsStore"> <head> <title>Sports Sto ...

javascripthtmlangularjsangularjs-directive

Saving Json data to a variable

I am looking to store a JSON Object in a variable and format it with values like (JAN_2018, FEB_2018, etc.) and another set of values like (1081136328, 1069248328, etc.) Here's the code I have so far: var json = $.parseJSON(data); $(json ...

javascriptjqueryjson