CODEWITHSUNDEEP
htmlcss
Leo
Leo

Reputation: 977

Dropdown menu cropped as it stretches to the length of its container

I have created a simple JsFiddle here: http://jsfiddle.net/3ue0mfcp/9/ - I can't make the dropdown menu stay positioned outside its parent container and at the same time stretch to become wider when the list elements are wider than the parent container.

I have tried to use 

overflow: visible

but no hope, what I am doing wrong?

Upvotes: 1

Views: 644

Answers (2)

gfullam
gfullam

Reputation: 12045

Declare a fixed width on a container element

Preface: You are expected to declare position coordinates and/or width when you use position: absolute.

If you don't declare coordinates (top, right, bottom, and/or left), the browser automatically sets them to auto, which may lead to unpredictable and inconsistent behavior (depending on the browser).

If you don't declare width — in Chrome 39 (the version I happen to be using right now) — the width of the absolutely positioned element will expand with its content until its edges reach the nearest positioned ancestor's edges, at which point it stops expanding.

Each browser may use different logic when no coordinates and/or width are declared.

So, you must declare a width on the absolutely positioned element if you want it to be wider than its nearest positioned ancestor.

Solution: But if you want variable-width child elements, you can achieve it by wrapping the children in a fixed-width parent, which gives the effect of a max-width.

Caveat: The variable-width children will continue to be shown if your cursor is over any part of the fixed-width parent. In other words, if your cursor is over the parent, but not the child, the child will still be visible.

Here is a demonstration of this method:

.button {
    position: relative;
    display: inline-block;
    padding: 10px 15px;
    cursor: default;
    font: normal 1em/1em sans-serif;
    color: #fff;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 3px;
    background-color: #2f7bbd;
}
.dropdown {
    position: absolute;
    top: 37px;
    left: 0;
    width: 300px; /* max-width of children */
}
.dropdown ul {
    display: none;
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    border-bottom: none;
    background-color: #fff;
}
.dropdown ul li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #ccc;
}
.dropdown ul li a {
    display: block;
    padding: .5em;
}
.button:hover .dropdown ul {
    display: inline-block;
}
<span class="button">Test
  <span class="dropdown">
     <ul>
       <li><a href="#">button test test test test</a></li>
       <li><a href="#">button</a></li>
       <li><a href="#">button</a></li>
    </ul>
  </span>
</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Upvotes: 0

Cliff Ribaudo
Cliff Ribaudo

Reputation: 9039

Remove the position:absolute; it is not required. Also, you do not need all those overflow:visible; you can remove all of them as well.

.tooltip-popup > ul {
    ....
    position: absolute;
    ....
 }

Upvotes: 1

Related Questions