after adding an “overflow: Scroll” the hidden div that should show if hovered over an child div does not appear anymore
Question
So I'm making a list of divs ( childs ) that contains an item (it's a shoppingcard ) that should display more information if you hover over it. I've got it working but it is a list that can get more items than the div(the div is "fixed") can fit. So it needs an overflow-x: auto; . But when it has an overflow-x it does not show the menu anymore outside the div(parent). How can i make it appear outside?
my code, you can also see it on fiddle
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="makerelative">
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
</div>
</div>
</body>
3 answers
solution1
0 2016-10-28 08:49:40
try to add position: fixed; to your popupMenu and position it-> this will make it appear
solution2
0 ACCPTED 2016-10-28 13:36:56
after trying many things i came to the anser that is you create an "overflow: auto;" it will not let anything appear on the outside of the div you specify it to. so to make it appear increase the size of your div and give the options a "max-width" now your div has free space. use "left: " or "right: " to set it at the right location and it will work!
thanks for all the help.
For all the people that want the code it's on fiddle .
solution3
-2 2016-10-28 08:57:58
I Just cleaned up the code and used JS to print out a bunch of items.
Just take a look at the CSS and the div structure.
Good luck.
var contents = "<div class=makerelative'>\\ <div class='ItemContainer'>\\ <a>input</a>\\ <div class='popupMenu'>\\ MORE INFO HERE THIS IS THE EXTRA WINDOW<br>\\ <button>button1</button>\\ </div>\\ </div>\\ </div>"; var container = $("#container"); for(var i = 0; i < 20; i++) { container.append(contents); }
#container { position: absolute; top: 40px; right: 0; bottom: 0; width: 300px; } .makerelative { position: relative; } .ItemContainer { padding: 10px; position: relative; outline: 1px dashed #000; background: #CCC; } .ItemContainer:hover { color: white; background: deepskyblue; } .ListContainer { font-family: sans-serif; padding: 10px; height: 100%; } .popupMenu { position: absolute; display: none; left: 0px; margin-left: -150px; margin-top: -20; outline: 1px dashed #000; width: 150px; } .ItemContainer:hover .popupMenu { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div id="container"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Show hidden div when it is hovered over
Div adding scroll bars even with overflow: hidden
dropdown cannot show over a div with hidden overflow
Scroll div inside hidden overflow div
How to scroll a larger div in an overflow:hidden div
How to show child div content outside of overflow: hidden parent?
Scroll does not work when parent div overflow is hidden
change appearance of a child div when another child div is hovered over
Show another div when image is hovered over
Overflow:hidden can't scroll in div
Related Tags