Hello so I am trying to make a div appear when an element has been toggled. The function and events definitely work because if I remove the styling then the element appears but when I add it, it has disappeared and I actually have no idea why. It disappears when I add position:absolute but even when I put the height and width to 100% and it doesn't follow. Here is my Sandbox.
Here is my css:
* {
box-sizing: border-box;
}
html,
body,
#root {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
user-select: none;
background: lightblue;
}
.Main {
height: 100%;
width: 100%;
position: abosolute;
}
.Contain {
border-radius: 50%;
box-shadow: 50px rgba(0, 0, 0, 0.05);
position: absolute;
height: 50px;
width: 50px;
padding-left: 20px;
margin-bottom: 20px;
z-index: 998;
cursor: pointer;
}
.Contain p {
color: white;
}
.Item {
width: 100%;
height: 100%;
background: white;
border-radius: 5px 30px 30px 5px;
will-change: transform, opacity;
position: absolute;
display: inline-block;
bottom: 0.1%;
box-shadow: 50px rgba(0, 0, 0, 0.05);
}
.Item p {
color: black;
}
.Buttons {
top: 20%;
left: 25%;
z-index: 998;
position: absolute;
}
.Overlay {
background-color: #282c34;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.05);
z-index: 999;
position: absolute;
}
I would post the JSX but they're in different pages and it is probably easier to see the sandbox
Thank you!
So I figured out that what was causing issues with my style was my <a.div> around my overlay component that reduced the styling. So I made the styling for the div to be position: 'sticky' and top:0 and width and height to 100%.
Any children of another div would be styled in relative to fit the parent div so the parent div must be styled accordingly
I made a fiddle here.
Why does dice-canvas-container use the full width of the window and not stop at the start of attack-canvas-container?
Is it because both columns are positioned absolute?
<div id="attack-container">
<div id="dice-canvas-container">
<div id="plyra-dice-canvas"></div>
<div id="plyrb-dice-canvas"></div>
</div>
<div id="attack-canvas-container">
..................
</div>
</div>
If suitable with your requirement then you can go with flex css instead of position: absolute
#attack-container {
padding: 0;
text-align: center;
/* position: absolute; */
max-width: 1728px;
max-height: 1080px;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1047;
/* float:left; */
display:flex;
}
#dice-canvas-container {
padding: 0;
text-align: center;
max-width: 1428px !important;
max-height: 1080px;
width: 100%;
height: 100%;
/* position: absolute; */
left: 0;
top: 0;
opacity: 0.8;
z-index: 1048;
/* display: block; */
/* float:left; */
background-color: red;
min-height:150px;
}
#attack-canvas-container {
#extend %background-gradient;
max-width: 300px;
max-height: 1080px;
font-size: 90%;
width: 100%;
height: 100%;
z-index: 1048;
/* position: absolute; */
right: 0;
top: 0;
box-sizing: border-box;
text-align: left;
-webkit-box-shadow: -4px 0px 5px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow: -4px 0px 5px 0px rgba(50, 50, 50, 0.3);
box-shadow: -4px 0px 5px 0px rgba(50, 50, 50, 0.3);
min-height: 150px;
}
#plyra-dice-canvas,
#plyrb-dice-canvas {
padding: 0;
text-align: left;
position: absolute;
max-width: 1428px;
max-height: 540px;
width: 100%;
height: 50%;
z-index: 1049;
}
#plyra-dice-canvas {
left: 0;
top: 0;
height: 50%;
}
#plyrb-dice-canvas {
left: 0;
top: 50%;
height: 50%;
border-top: 1px solid $brand-primary;
}
<div id="attack-container">
<div id="dice-canvas-container">
<div id="plyra-dice-canvas"></div>
<div id="plyrb-dice-canvas"></div>
</div>
<div id="attack-canvas-container">
</div>
</div>
Check the updated Fiddle.
Because you are using position: absolute (1) with width: 100% (2) for both containers in combination with z-index (3).
(1) : because of this, both container are absolutely positioned, not relatively.
(2) : since both have 100% width, they will overlap the other one.
(3) : the one with the higher z-index wins the upper hand.
You need to change the absolute positioning and give proper widths to the divs.
I am facing a typical situation. I am trying to practice dropdown menu in CSS. Here, the child div .dropdown (grey colored) appears whenever the parent div .content-small (green colored) is hovered upon. Please note, that I have used the .max-width property for all div's because I want all the div's to scale down/up whenever the browser window is scaled.
Now, what I want to do is that I want to increase the max-width of the child div dropdown. But whenever I try to enter a value above 50px, nothing happens. The width DOES NOT increases.
I know that this can be resolved by replacing max-width with only width in the .dropdown class. But if I do that, then the child div dropdown will not scale with the browser window. So in any case, I have to use .max-width property for all divs.
I also don't want to use media queries at this stage. In totality, this is what I am looking for:
I want to increase the width of the dropdown child div .dropdown, I also want it to be scaled along with the browser windows like all other div's (max-width)
I don't want to use media queries at this stage, since I am trying to practice with plain CSS
I don't mind if the .dropdown div DOES NOT remain the child of the parent .content-small (if a possible solution needs it that way)
Would appreciate a solution for this.
* {
box-sizing: border-box;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
html, body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0,255,204,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
}
.content-small:hover .dropdown{
visibility: visible;
}
.dropdown {
box-sizing: border-box;
width: 100%;
max-width: 250px;
height: 50px;
background-color: rgba(214,214,214,1);
position: absolute;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(255,0,0,1);
top: 47px;
left: -3px;
visibility: visible;
}
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown"></div>
</div>
</div>
</div>
Hopefully this does not interfere with what you are trying to accomplish, but what about restructuring your code a little bit:
HTML
<div class="wrapper">
<div class="content">
<div class="content-small">Home</div>
<div class="container" style="height:60px;padding-top:10px;">
<div class="dropdown"></div>
</div>
</div>
</div>
CSS
*{
box-sizing:border-box;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0,255,204,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
margin-top:10px;
}
.content-small:hover + .container, .container:hover{
visibility: visible;
}
.container{visibility:hidden;display: inline-block;
max-width: 100px;
width: 100%;}
.dropdown {
background-color: rgba(214,214,214,1);
border: 3px solid rgba(255,0,0,1);
max-width: 100px;
height: 100%;
max-height: 50px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 5px;
}
And here is:
UPDATED JS FIDDLE
[EDIT]
The + in the css select is saying to look for elements after the first criteria. So, in this case, the css is saying, when you hover over .content-small, it then targets the element AFTER .content-small with .dropdown and applies the css to it. Although it is not the most clear, here is a link of some documentation on css selectors
[SECOND EDIT]
I changed the code above to wrap the dropdown in a container and then set it so on container:hover it alters the visibility of .dropdown the same way, making it persist as visible if you are hovering over either. The reason I had to introduce a container is to give it that spacing between .dropdown and .content-small - which you can see I did with padding-top: and not margin-top: because margin would not have worked with the :hover
when you tell: width:100%; to an absolute child, it takes innerwidth and won't mind the borders,why should it overflow :) ?
You may size it with coordonates like you did for left, use right as well and drop the width:100%;
max-width will still be efficient and you may use margin:auto as well if you wish.
* {
box-sizing: border-box;
}
a {
color: rgba(0, 0, 0, 1);
text-decoration: none;
}
a:hover {
color: rgba(0, 0, 255, 1);
}
html,
body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0, 0, 0, 1);
padding: 0px;
}
.wrapper {
height: 220px;
/*demo purpose */
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204, 204, 204, 1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0, 0, 0, 1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0, 255, 204, 1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0, 0, 0, 1);
top: 5px;
}
.content-small:hover .dropdown {
visibility: visible;
}
.dropdown {
box-sizing: border-box;
max-width: 250px;
height: 50px;
background-color: rgba(214, 214, 214, 1);
position: absolute;
border: 3px solid rgba(255, 0, 0, 1);
top: 47px;
left: -3px;
right: -3px;
margin: auto;
visibility: visible;
}
.wrapper + .wrapper .dropdown {
max-width: 50px;
font-size:0.75em;
}
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown">100% + border
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown">tiny
</div>
</div>
</div>
</div>
I've added a grey box to my site. i want the box to follow the bottom of my page as more pictures are uploaded to my site. How do I make that work.
.GreyBG {
background: #595959;
position: absolute;
border-style: solid;
width: 50%;
//578px;
height: 70%;
border: 1px solid rgba(0, 0, 0, .2);
top: 220px;
left: 0px;
right: 0px;
border-width: 1px;
border-color: #21262c;
border-radius: 1px;
margin-left: auto;
margin-right: auto;
z-index: -1;
}
<div class="GreyBG"></div>
It depends on the parent element and its display parameters, but in general just remove position: absolute;, which will make it static and scroll with the rest.
Change top:220px to bottom :0;
This will stick the div to bottom of the page.
Update
Change the css to this:
.GreyBG {
background: #595959;
position: absolute;
border-style: solid;
width: 50%;
//578px;
height: 70%;
border: 1px solid rgba(0, 0, 0, .2);
top: 220px;
left: 0px;
right: 0px;
border-width: 1px;
border-color: #21262c;
border-radius: 1px;
margin-left: auto;
margin-right: auto;
z-index: -1;
max-height: 100%;
overflow-x: hidden;
}
.GreyBG img {
width: initial;
height: inherit;
}
I have an issue where the height of the "content body" div (below) is exceeding the bottom of the page (and behind the page footer). I want this div to scroll when there is long content, which it does now, but it doesn't scroll to the bottom of the div as it is beyond the page. I'm not sure what is causing the issue? Here is an example: http://jsfiddle.net/Gg6qY/
CSS:
html, body {
height:100%;
width: 100%;
overflow: hidden;
margin: 0;
}
header {
position: fixed;
width: 100%;
background: #006f3b;
color: #fff;
top: 0;
height: 60px;
padding: 10px;
}
#content {
position: relative;
height: 100%;
width: 100%;
padding: 60px 0 20px 0;
/* Header height and footer height */
margin: 0 auto;
/* Center content */
}
#sidebar {
position: absolute;
background: #191919;
color: #fff;
left: 0;
top: 60px;
bottom: 0;
width: 220px;
padding: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#contentHeader {
position: relative;
left: 220px;
z-index: 100;
padding: 10px;
background: #fff;
border-bottom: 1px solid #191919;
-webkit-box-shadow: 3px 3px 3px #888888;
-ms-box-shadow: 3px 3px 3px #888888;
box-shadow: 3px 3px 3px #888888;
}
#contentBody {
position: relative;
background: #fff;
height: 100%;
margin-left: 220px;
padding: 0 10px;
overflow-y: scroll;
}
footer {
position: fixed;
width: 100%;
background: #999;
color: #000;
bottom: 0;
height: 20px;
text-align: center;
}
HTML:
<body>
<header>The header</header>
<div id="content">
<div id="sidebar">The Sidebar</div>
<div id="contentHeader">The Content Header</div>
<div id="contentBody">
<p>The Content Body</p>
</div>
</div>
<footer>The Footer</footer>
Thanks!
body and #content, goes beyond the window size as height:100% means height of the content area of the body which if you add to top and bottom padding, goes beyond the window. use
box-sizing:border-box to fix this.
contentBody to expand to maximum available height, make it absolute and set top and bottom.
contentBody should also work ideally with height 100%. Have not checked that.
updated fiddle:
http://jsfiddle.net/GaYf4/1/
Not sure what your intended goal is, but I think this is what you are looking for.
html{
min-height: 100%;
}
html, body {
width: 100%;
overflow: hidden;
margin: 0;
}
body
{
height: 100%;
}
if you know exactly where you want the top and bottom of all elements to be (which is seems like you do), its usually easiest to use 'top', 'bottom', 'left', and 'right' rather than 'width' and 'height', as padding adds to the width and height and will cause nasty overflows.. anyways this works on my machine..
html, body {
height:100%;
margin: 0px;
}
header {
position: absolute;
left: 0px;
right: 0px;
background: #006f3b;
color: #fff;
top: 0px;
height: 60px;
padding: 10px;
}
#content {
position: absolute;
top: 60px;
left: 0px;
bottom: 0px;
width: 100%;
}
#sidebar {
position: absolute;
background: #191919;
color: #fff;
left: 0px;
top: 0px;
bottom: 0px;
width: 200px;
padding: 10px;
}
#contentHeader {
position: absolute;
top: 0px;
left: 220px;
height: 15px;
padding: 10px;
z-index: 2;
background: #fff;
right: 0px;
border-bottom: 1px solid #191919;
-webkit-box-shadow: 3px 3px 3px #888888;
-ms-box-shadow: 3px 3px 3px #888888;
box-shadow: 3px 3px 3px #888888;
}
#contentBody {
position: absolute;
padding: 10px;
background: #fff;
left: 220px;
top: 38px;
bottom: 20px;
right: 0px;
overflow: auto;
}
footer {
position: fixed;
left: 0px;
width: 100%;
background: #999;
color: #000;
bottom: 0;
height: 20px;
text-align: center;
}