Dropdown centered underneath parent with overflow: hidden

325
November 26, 2016, at 5:24 PM

I have a nav bar which has a string of text for a link that opens a dropdown. The parent of this link has overflow: hidden to allow me to truncate the string incase it gets too long. However, I want the dropdown to be positioned absolutely underneath and centered regardless of the width of the parent. Since I'm using overflow: hidden, the dropdown gets cutoff. I want to keep the positioning of the dropdown as well as the overflow properties.

Is there a CSS fix for this? I know I can't ignore the parent's overflow property, but I'd rather not use position: fixed and manipulate margins with JavaScript if possible.

I've made a simple fiddle here

Thanks in advance!

Answer 1

Unfortunately there is no way in CSS to make a child of an overflow: hidden element show its contents outside the parent borders, you must change the hierarchy.

If that is not possible, you could add padding at the bottom to .nav-pull-left that is the size of your dropdown, although that's a rubbish solution..

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

You could also use JavaScript to dynamically update the height of your parent container when the dropdown shows but once again, reordering the hierarchy is best and cleanest.

If that is the way you want to go, let me know and I can help :)

Answer 2

May I suggest the following, where you change your css as follows.

.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;
}

With this your container overflow is kept and gets pushed down, the drop down menu is centered.

Is this something you could use?

Here is a fiddle demo

READ ALSO
Populate drop down list in Meteor

Populate drop down list in Meteor

I am building a drop down list in Meteor using a helper functionHowever, users will need to be able to update the form in the future so I need the form to repopulate with all the previously selected values based on data in Mongo

300
Display a Page and Edit/Update the page using popup Dialog

Display a Page and Edit/Update the page using popup Dialog

I display the content of my db on a table, however, I would like the user to be able "edit/update" the content using a popup with the help of JqueryHowever, I've been struggling with getting the edit_id to be displayed inside the popup

313
why jquery click function is not working inside foreach loop

why jquery click function is not working inside foreach loop

My scenario is: creating button for each $newfrnd and when I click each button it insert a data in database(for example)

269
jQuery delegate() / on() - force order of events

jQuery delegate() / on() - force order of events

Perhaps a silly question but

378