I've seen a few questions like this in my search, but either the question didn't get answered properly or no answer was given. So, I'll ask again.
<style>
.parent { overflow-y:scroll; overflow-x:visible; width:100px; }
.child { position:relative; }
.child-menu { position:absolute; top:0px; left:-100px; display:inline-block; }
</style>
<div class="parent">
<!-- Lots of the following divs -->
<div class="child">
Text Line
<div class="child-menu">some pop out stuff</div>
</div>
</div>
Alright, that's just an example. But basically, what I'm trying to accomplish is have the .child classes be scrollable on the y axis...scroll up and down. But I want the x-axis....the child-menu's to be visible outside the .parent container.
Does that make sense? So what is happening is that when the page renders, the browser is interpreting the overflow as auto altogether and not respecting the separate axis. Am I doing something wrong or are the browsers just not up to CSS3 spec yet on this? Mostly only tested on Chrome.
I figured it out!
The parent should be overflow:auto;
The .child should be position:relative;
The .child-menu should be position:fixed; with NO top or left positioning.
If you do this, it will keep it it inline with the content.
If you need to move the child-menu use margins and not top or left. Example margin-left:-100px;
EDIT
As it seems people still use this, please note that you will have to use javascript to move the fixed items as the page scrolls.
It solved here!
They use css and JS.
.child:hover .child-menu { display: block; }
.parent { overflow-y:auto; overflow-x:hidden; width:100px; height:150px }
.child { position:static; }
.child-menu { position:absolute; display:inline-block; display: none; }
https://css-tricks.com/popping-hidden-overflow/
https://jsfiddle.net/68fBE/2/
.parent {
overflow-y: auto;
width: 100px;
}
.child-menu {
display: block;
position: fixed;
top: auto;
left: auto;
}
Related
We are currently struggling trying to break out of an div having overflow hidden.
We have a dropdown-menu that gets filled with suggestions when the user type (type 'c' in the search field to see). This dropdown-menu is currently hidden behind the menubar, because it has "overflow hidden".
We can break out, if we remove the top:100% and set position to fixed. But we would like it to stay absolute (i.e. for mobile devices).
Created an example here: https://edukarma.com/bootstrap/
The dropdown suggestion list can be found in .headerItem.headerSearch .searchField .twitter-typeahead .tt-dropdown-menu.
I ran into this issue and it can be quite frustrating. However after reading this article, I found the suggested answer to be quite satisfying.
Essentially, You must specify an outer parent (add a 'grandparent' tag) to be explicitly position:relative; (with overflow unspecified) and the direct parent to be overflow:hidden; instead of having both of these CSS options directly applied on the same direct parent.
The examples provided (for completeness and in case the 2012 article is lost):
Not working
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
position:relative;
overflow:hidden;
}
.child {
position:absolute;
top:-10px;
left:-5px;
}
Working! (The Child is free to roam anywhere)
HTML
<div class="grand-parent">
<div class="parent">
<div class="child"></div>
</div>
</div>
CSS
.grand-parent {
position:relative;
}
.parent {
overflow:hidden;
}
.child {
position:absolute;
top:-10px;
left:-5px;
}
A possible workaround is to replace overflow:hidden with the following:
.navbar .headerItem.headerSearch {
display: table; /* like overflow, creates new block formatting context */
margin-left: 180px;
padding-right: 15px;
margin-top: 11px;
}
.navbar .headerItem.headerSearch:after {
/* hack to make the table use all available width */
content: '. .';
/* with such big spacing, the 2nd dot will always wrap to the new line,
making the table-like block use the width of the container
instead of shrinking to content */
word-spacing: 99in;
/* make this helper invisible */
display: block;
height: 0;
overflow: hidden;
}
You can do this by setting the child to be position: absolute.
HTML
<section>
Parent
<div>Child</div>
</section>
CSS
section {
width: 300px;
height: 300px;
background: dodgerblue;
overflow: hidden; /* BOOM */
}
section div {
position: absolute; /* BOOM */
left: 100px;
width: 100px;
height: 400px;
background: gold;
}
Demo: http://jsbin.com/nukic/2/edit
I am experiencing some weird behavior when zooming out on my webpage. I have some divs holding a title and <p>overlay. When the user hovers over the div, I want the <p>(in the overlay) to show, and when the user is not hovering, I want the <p> not to show.
This works fine in when the user is at a 0 zoom in the browser, but when the user zooms out, I can see the <p> section. Whilst zoomed out I can increase the bottom to correct for this, but there has to be something I missing.
Is there anyway to keep the <p> hidden when zoomed out?
I understand this must sound crazy so I did a crude JSFiddle to show what I am talking about. The weird thing is that when zooming out on JSFiddle the problem I am having in my browser (safari) is not happening on their site.
http://jsfiddle.net/FB2TM/
Any help would be appreciated!
I should have mentioned that I plan on animating the mouse over effect.
This behavior is happening because the browser is not resizing the text proportionally ending up with text larger than it should. You will also experience different text sizes over different browsers when resizing.
I find that the best solution is to do it differently by completely hiding the text that is not supposed to show:
.box {
width:200px;
height:200px;
background-color:aqua;
position: relative;
overflow: hidden;
}
.caption {
width:200px;
color:white;
background-color:black;
left: 0;
z-index: 2;
bottom: 0;
position: absolute;
}
.caption p {
display: none;
}
.box:hover .caption {
bottom:0;
}
.box:hover .caption p {
display: block;
}
http://jsfiddle.net/FB2TM/2/
Changing from your approach of hiding the text with a negative offset to just hiding the text you want to hide might change your css animation options a bit. It does allow for dropping the z-index from the css.
<div class="box">
<div class="caption">
<div class="title">THE TITLE</div>
<p>These are words, I do not want them to show, until mouseover. When zooming out, I can see these words.</p>
</div>
</div>
and your css to:
.box {
background-color:aqua;
height:200px;
position: relative;
width:200px;
}
.caption {
background-color:black;
bottom:0;
color:white;
position: absolute;
width:200px;
}
.caption p {
display: none;
}
.box:hover p {
display: block;
}
jsFiddle
I suggest to use top and fix positions with margin-top. For example:
.caption {
width:200px;
color:white;
background-color:black;
left: 0;
z-index: 2;
top:100%;
margin-top:-30px; //Height of THE TITLE
position: absolute;
}
.box:hover .caption {
margin-top:-116px; //Height of .caption
}
I think using bottom is not a good practice.
Here's an update to your fiddle: http://jsfiddle.net/FB2TM/3/
Okay so this is quite hard to explain but basically I position the title div perfectly so that it is centered in the header div.
It remains in this position on some computers.
However, on other computers it jumps further down the page - even with the same positioning attributes. (This is tested on the same web browser.)
I have tried with absolute, relative etc. positioning, still no luck!
Note: This div contains text.
CSS:
#header {
position:relative;
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
}
#title {
position: relative;
top: -20px;
left: 315px;
}
Thanks!
Hi is difficult to understand exactly your issue but I can give you a few tips to have a nice center vertical and horizontal:
For horizontal alignment you can use display:inline-block if you want all the div centered:
#header {
text-align:center;
}
#title {
display:inline-block;
}
For vertical align use line-height equal to the total height
#header {
line-height:170px;
}
This only work for one line text if you want another option tell me
And the demo here http://jsfiddle.net/8JLzy/7/
Edit
To work with a text of more than one line you can do this : First your html add a wrapper inside #title:
<div id="header">
<div id="title">
<div class="center">Your Title</div>
</div>
</div>
And on the CSS work with display property:
#title {
display:table;
height:100%;
margin:auto; /*Make the horizontal*/
}
#title .center {
display:table-cell;
vertical-align:middle;/*Make the Vertical*/
}
New demo http://jsfiddle.net/8JLzy/16/
use line-height, not position:relative
#header {
/*position:relative;*/
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
font-size:1em;
}
#title {
line-height:0.5em; /* for example, or instead use padding-top: */
padding-left: 315px;
}
is it possible to make the 'width' from a child DIV larger than the 'width' from the parent DIV... (with css only)
Please see the following example for more details:
http://jsfiddle.net/6UFs4/
<div id="main">
<div id="sidebar">DIV1
<div id="sidebar_2">DIV1 Sub</div>
</div>
<div id="page-wrap">DIV2</div>
</div>
#main
{
display: block;
width: 100%;
}
#sidebar
{
background-color: Aqua;
float: left;
width: 80%;
}
#sidebar_2
{
background-color: Lime;
}
#page-wrap
{
background-color: Gray;
}
The size from DIV1 Sub should be 100% from browser window and not limited from parent DIV. I tried using overflow: visible but it´s not working...
Any ideas? Thanks in advance.
You can use position:absolute and width:100%; to meet your requirements but you have to be careful about position of your element(x and y axis with respect to page) inorder to show your image at desired location
See the example:
http://jsfiddle.net/6UFs4/2/
Yes you can by changing its positioning.
jsFiddle
#sidebar_2
{
background-color: Lime;
position:absolute;
left:0;
right:0;
}
Just add this css to your child div:
#sidebar_2 {
position:absolute;
left:0;
right:0;
}
Demo: http://jsfiddle.net/6UFs4/4/
Alright, so I've got a couple divs wrapped in a container. The two interior divs overlap each over by 15px; The problem is I'm not able to layer them like I want.
<div class="headerButtons">
<div id="WorkTableButton" class="WorkTableButtonActive">
Work Table
</div>
<div id="additionalCostsButton" class="additionalCostsButtonInactive">
Additional Costs
</div>
</div>
and the CSS looks like so,
.headerButtons{
margin:auto;
text-align:center;
}
.headerButtons div{
text-align:center;
height:27px;
text-indent:-9999%;
display:inline-block;
cursor:pointer;
}
#WorkTableButton{
width: 195px;
}
.WorkTableButtonActive{
background: url(ui_images/WorkTableActiveButton.png) no-repeat;
z-index:99999;
}
#additionalCostsButton{
width: 192px;
position:relative;
left: -15px;
}
.additionalCostsButtonInactive{
background: url(ui_images/AdditionalCostsInnactiveButton.png) no-repeat;
z-index:0;
}
The problem is, the #WorkTableButton div still shows up behind the #additionalCostsButton even though the WorkTableButtonActive class is applied to it which layer the div above the other... Right?
What am I doing wrong?
The z-index property only works on elements that have been specifically positioned.
You need to add a position to your #WorkTableButton, like this:
#WorkTableButton{
width: 195px;
position: relative;
}
#additionalCostsButton will appear behind #WorkTableButton after that.
Change
#additionalCostsButton {
left: -15px;
}
to
#additionalCostsButton {
margin-left: -15px;
}