I create div which is cotnst. heigth and it's overflowing content is hidden. But when i hover it then i want do display all content. I did some JSFIDDLE but all next divs moves down. I want to hovered div covers another divs on hover but i dont know how. Please, help.
html
<div class="header">
</div>
<div class="container">
<div class="content">
</div>
<div class="button">
<button>
Button
</button>
</div>
</div>
<div class="space">
</div>
<div class="footer">
</div>
css
.header
{
background-color: violet;
height: 40px;
}
.container{
background-color: orange;
width: 400px;
}
.content{
background-color: lightblue;
height: 100px;
overflow: hidden;
}
.content:hover {
overflow: visible;
height: auto;
}
.button{
background-color: lightgreen;
text-align: center;
height: 30px;
}
Make use of the position and z-index attributes as below -
Change the two css classes
.container{
background-color: orange;
width: 400px;
position : relative;
/* height same as that of content. Needed to avoid the jump effect */
height : 100px;
}
.content:hover {
overflow: visible;
position : absolute;
height : auto;
z-index:999;
}
You can try positioning it this way (absolute), it was respond to the position of the divs above it, but over look the position of divs below it so that they can be overlapped.
.container{
position:absolute;
}
Related
I need a container with a fixed width, and an element inside it that can scroll within that fixed width. The catch is that I need the content that goes beyond the bounds of the fixed width container to be visible. Does anyone know how to achieve this?
Codepen of the situation I'm describing: https://codepen.io/anon/pen/zyZOjM
.outer {
background: red;
width: 400px;
height: 800px;
}
.inner {
background: blue;
max-width: 200px;
margin: auto;
overflow-x: scroll;
height: 300px;
color: white;
}
.element {
background: green;
width: 800px;
height: 100px;
}
<div class="outer">
<div class="inner">
<div class="element">Initially, this element should overflow all the way off the edge of the red (exactly how it does when overflow is set to visible). It should be scrollable, though (how it is when overflow is set to scroll) and when you scroll all the way to the right,
the right of the green should end at the same place is does now (right edge of the blue).</div>
</div>
</div>
I'm pretty stumped. This could have a simple solution but I've been pulling my hair out a bit.
Is this what want to achieve?
.container1 {
background: red;
width:400px;
height:800px;
}
.doop1 {
background:blue;
max-width: 200px;
margin:auto;
overflow: auto;
height:300px;
overflow-Y: hiddden;
}
.doop2 {
background:green;
width:800px;
height:100px;
}
#overflow-text{
display: block;
width: 190px;
position:fixed;
}
<div class="container1">
<div class="doop1">
<div class="doop2">
<p id="overflow-text">
Initially, this element should overflow all the way to the edge of the red. When you scroll all the way to the right, the green should end at the same place is does now (edge of the blue).
</p>
</div>
</div>
</div>
I am using bootstrap, I wanted one div behind the other div, so used z-index en position: absolute and relative.
When doing this, every div under the div with z-index: 1 goes behind this div, while I want it to stay under it.
The div also becomes wider than the max-width when using 100%
<div class="row" id="MENUROW">
<div class="col-md-12" id="MENUCOLUMN"><h1>SHOP</h1></div>
</div>
<div class="row" id="MAINROW"> <!-- this has the background-image -->
<div class="col-md-12" id="MAINCOLUMN">
</div>
</div>
CSS:
#MENUROW
{
position: relative;
height: 80px;
background-color: transparent;
z-index: 2;
}
#MAINROW
{
position: absolute;
z-index: 1;
top: 60px; /*because there is 1 div above the menu div, this div needs to be just under that div, behind the menu div */
width: 100%;
background-image: url(../images/background.jpg);
background-size: cover;
}
when doing this the background image goes wider (to the right) than the width of the parent div.
https://jsfiddle.net/2cs60vrr/3/ example, just made the background red to show how wide it should be, the background image goes much wider
Point 1
You didn't used .container class in your HTML. Bootstrap has a structure to get it's maximum feature. You must need to use .container. Bootstrap structure is below:
<div class="container">
<div class="row">
<div class="col-*-*">
Your Content
</div>
</div>
</div>
Make your html as above to solve this issue.
Point 2
If you want not change your html, then use this code below to any .row to solve this issue.
margin-left:0;
margin-right:0;
I am sorry if we are unsure what you are looking for but is that what you want?
.grid {
margin: 0 auto;
max-width: 100%;
width: 100%;
background-color: #fff;
}
.row {
width: 100%;
margin-bottom: 0px;
display: flex;
}
#MENUROW {
position: absolute;
height: 80px;
background-color: red;
z-index: 2;
}
#MAINROW {
position: absolute;
z-index: 1;
top: 0;
width: 100%;
max-width: 1400px;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg);
background-size: cover;
}
https://jsfiddle.net/norcaljohnny/xt9c9d2r/2/
You should put the wrapper around the whole thing to position:relative;
And both rows to position:absolute;
That's it.
When using position:absolute; the block goes to the absolute top left corner of the closest parent html tag that has a position:relative;. If there is no parent with position:relative; your absolute positioned items go to the upper left corner of your screen.
(the first row is not a parent of the second, but they are siblings. The wrapper "grid" is the parent of the 2 rows)
<div class="grid">
<div class="row" id="MENUROW">
<div class="col-md-12" id="MENUCOLUMN">
<h1>SHOP</h1>
</div>
</div>
<div class="row" id="MAINROW">
<div class="col-md-12" id="MAINCOLUMN">
text
</div>
</div>
</div>
And CSS
.grid {
position: relative;
}
.row {
width: 100%;
}
#MENUROW {
position: absolute;
background-color: red;
z-index: 1;
}
#MAINROW {
position: absolute;
z-index: 2;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg);
background-size: cover;
}
Here is your updated example:
https://jsfiddle.net/2cs60vrr/6/
I'm looking to build a gantt chart with the days, months and years across the top and the tasks below them.
Here is what I have so far:
So in the image above, the scroll-x is working on everything including the blue, red and yellow divs and the grey div below them. This is to ensure that as you scroll across, the days stay with the contents of the grey div. scroll-y is only acting on the grey div with the blue campaign name div in it.
Here is the problem:
The problem is that when you move the scroll-x of parent, the scroll-y moves across the screen (so that it is sitting in the middle of the parent div). What I'm looking to do is have the scroll-x work on all of the parent's content and the scroll-y only work on the grey div but for the scroll bar to stay on the far right of the parent.
Any advice would be really appreciated and thanks in advance.
css:
.container {
position: relative;
}
.parent {
overflow-x: scroll;
overflow-y: hidden;
height: 100%;
width: 100%;
position: absolute;
}
.date {
width: 2000px;
height: 25px;
float: left;
}
.hold_content {
overflow-y: scroll;
overflow-x: hidden;
height: calc(100% - 50px)
}
.content {
height: 2000px;
width: 2000px;
float:left;
}
html
<div class="container">
<div class="parent">
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="hold_content">
<div class="content"></div>
</div>
</div>
</div>
So, the scrollbar is relative to whatever it's scrolling, which, here, is the hold-content div. And, unfortunately, when that's set to its full width of 2000px, that means the scroll-y scrollbar is not visible because it's offscreen, like so:
html {
box-sizing: border-box;
font-family: sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body,
.container,
.parent {
height: 100vh;
}
html,
body,
div {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.parent {
overflow-y: hidden;
}
.date {
height: 25px;
width: 2000px;
}
.date:nth-of-type(1) {
background: blue;
}
.date:nth-of-type(2) {
background: red;
}
.date:nth-of-type(3) {
background: yellow;
}
.hold_content {
background: silver;
height: calc(100vh - 75px);
overflow: scroll;
width: 2000px;
}
.content {
height: 2000px;
text-align: center;
width: 2000px;
}
<div class="container">
<div class="parent">
<div class="date">Year</div>
<div class="date">Month</div>
<div class="date">Date</div>
<div class="hold_content">
<div class="content">
<button>Campaign Name</button>
</div>
</div>
</div>
</div>
Not sure if that's ideal or what you were going for. If you want the scrollbar to always be connected to the window (as it is by default), you're probably better off not scrolling these individual divs and instead using position:fixed on your date divs.
Note that this solution uses both viewport units (http://caniuse.com/#feat=viewport-units) and calc (http://caniuse.com/#feat=calc). Also, my code doesn't perfectly mirror your CSS because the code you provided didn't match up with your screenshots.
I am having an issue with my div staying withing my other div.
No matter what position I give it, the div will either jump to the top of the page or not show.
CSS:
.content {
width:100%;
background: #F0F0F0;
border: 1px solid #CCC;
height: 1000px;
margin: 0px auto;
}
.contentinside {
postition: relative;
margin: auto;
width: 960px;
height: 200px;
background-color:#000099;
}
HTML:
<div class="content">
<div class="contentinside">something here</div>
Need to close off your first div tag.
<div class="content"></div>
<div class="contentinside">something here</div>
You Need to put your first div inside the other div like below..you missing the end of second div
<div class="content">
<div class="contentinside">something here</div></div>
Try this:
.content {
position: relative;
/* rest of your styles */
}
.contentinside {
position: absolute;
/* rest of your styles */
}
Now the positioning of .contentinside is relative to .content.
Of course, check closing tags properly, typos, etc.
Here's the fiddle: http://jsfiddle.net/gBQqQ/
Here's the html:
<div id='testtexture'>
<div id='testinside'>
<div style='vertical-align: top;' class='test'></div>
</div>
</div>
And the css:
.test {
width: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
min-height: 130px;
height:auto;
padding-bottom:50px;
background:blue;
}
#testtexture {
width: 100%;
position: relative;
top: 10px;
}
#testinside {
z-index: 3;
background:red;
position:relative;
}
I do not see why there is an issue. I expect either there is something obvious that I am missing, or there is an underlying issue which means I cannot make the red div go above the blue div- maybe because it is a child of the blue div?
Generally not the best idea to have a child div you want to appear behind it's parent. Usually you would take the child div outside the parent to do this. Nonetheless it is possible. Add z-index:-1 to the child div and remove position:relative from the parent.
HTML
<div id='testtexture'>
<div id='testinside'>
<div class="test"></div>
</div>
</div>
CSS
.test {
position: relative;
z-index: -1;
width: 50px;
margin: 0 auto;
height: auto;
min-height: 130px;
padding-bottom: 50px;
background: blue; }
#testinside { background: red; }
See fiddle: http://jsfiddle.net/gBQqQ/1/
If you use firebug, you can see div.test is still there in the correct position behind it's parent. As a side note, the styling vertical-align you had on a div won't do anything.