This time, I'll include the code (as I've been asked previously).
The problem is that, even when this code does what I need (a CSS modal/lightbox window), I can't get it to animate neither the top nor the translate properties.
I think it's a problem of positioning, because, the original example used no position for the container but, instead, used the :before pseudo-element (I don't like it).
What's wrong with this code.
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1" />
<title>Pure CSS Modal Window</title>
<style>
*
{
margin: 0px;
padding: 0px;
}
.modal-container
{
position: fixed;
display: none;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.75);
}
.modal-content
{
position: absolute;
top: -100%;
left: 50%;
width: 70%;
max-width: 400px;
max-height: 400px;
transform: translateX(-50%);
background-color: #fff;
padding: 20px;
border-radius: 10px;
overflow-y: auto;
transition: all 5s;
}
.modal-container:target
{
display: block;
}
.modal-container:target .modal-content
{
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
Modal 1
Modal 2
<div class="modal-container" id="modal1">
<div class="modal-content">
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
Close
</div>
</div>
<div class="modal-container" id="modal2">
<div class="modal-content">
<p>This is the content of Modal 2</p>
Close
</div>
</div>
</body>
</html>
This is because the display state changes from display: none to display: block, meaning there is no previous layout to transition between.
One option would be to replace display: none with visibility: hidden and display: block with visibility: visible.
Working Example:
*
{
margin: 0px;
padding: 0px;
}
.modal-container
{
position: fixed;
visibility: hidden;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.75);
}
.modal-content
{
position: absolute;
top: -100%;
left: 50%;
width: 70%;
max-width: 400px;
max-height: 400px;
transform: translateX(-50%);
background-color: #fff;
padding: 20px;
border-radius: 10px;
overflow-y: auto;
transition: all 5s;
}
.modal-container:target
{
visibility: visible;
}
.modal-container:target .modal-content
{
top: 50%;
transform: translate(-50%, -50%);
}
Modal 1
Modal 2
<div class="modal-container" id="modal1">
<div class="modal-content">
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
Close
</div>
</div>
<div class="modal-container" id="modal2">
<div class="modal-content">
<p>This is the content of Modal 2</p>
Close
</div>
</div>
The solution provided by Alexander O'Mara works great (& also taught me a little), but I found another answer.
I solved it just separating both DIV's. I mean, instead of:
<div class="container">
<div class="content">
<p>Content here</p>
</div>
</div>
I used:
<div class="container">
</div>
<div class="content">
<p>Content here</p>
</div>
And for the CSS I used:
.container:target + .content {}
instead of
.container:target .content {}
All this without changing "display: none" for "visibility: hidden", as Alexander suggested, & it worked perfectly.
Thanks for your help. It's great to see that people around the world worries about other one's problems & try to solve them.
Cheers.
Marcelo.
Related
I am creating a data table grid in react, currently I am able to render my dummy data with my code. But the problem is that the header row is overlapped by the first data row, which is very annoying
This is the markup I have :
<div class='Table_table'>
<div class='Table_table-header'>
<div style="height:30px;">
<div class='table_fixed-cols'>
</div>
<div class='Table_x-scroll header'>
<div class='table_row'>
<div class="table_cell"> Name </div>
<div class="table_cell"> Age </div>
<div class="table_cell"> Location </div>
</div>
</div>
</div>
</div>
<div class='table-container'>
<div class="table_fixed-cols">
<div class="table_row even"><div>
<div class="table_row even"><div>
<div class="table_row even"><div>
</div>
<div class="table_x-scroll">
<div class="table_row even">Dana</div>
<div class="table_row ">57</div>
<div class="table_row even">San Francisco</div>
</div>
</div>
</div>
</div>
The CSS I have:
.Table__table{
position: relative;
overflow-y: hidden;
}
.table__cell{
border-right: 1px solid black !important;
padding: 3px 5px !important;
position: absolute;
}
.table__row{
display: flex !important;
position: absolute!important;
margin-top: 1%;
left: 0 !important;
/* overflow: auto!important; */
}
.table_fixed-cols{
top:0 !important;
left: 0 !important;
z-index: 100 !important;
overflow: hidden !important;
position: absolute !important;
}
.table_x-scroll{
overflow:hidden;
position: absolute;
top: 0;
right: 0;
z-index: 0;
}
The thing is that I see my first data row completely overlapped with the header row ( class='Table_table-header' ).
Have been spending hours on trying to fix this issue now..
Any help would be much appreciated !
change css for container switch between position: absolute, position: relative
I have a site that is a 1 page with different sections. On the first section I am adding a blue overlay over the first section using the below code:
<header class="text-center" name="home">
<div class="cover blue" data-color="blue"></div>
<div class="intro-text">
<h1 class="wow fadeInDown">Site Header</h1>
</header>
Here is the css for .cover.blue:
.cover{
position: fixed;
opacity: 1;
background-color: rgba(0,0,0,.6);
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 0;}
.cover.blue{
background-color: rgba(5, 31, 60, 0.6);
In the 2nd section I want to use an orange overlay but when I apply the div for the overlay the overlay on the 1st section is going in front of my text, buttons, etc and the color is changing to orange.
2nd section html:
<div id="about-section">
<div class="container">
<div class="cover orange" data-color="orange"></div>
<div class="section-title text-center wow fadeInDown">
<h2>Section 2</h2>
<hr>
<div class="clearfix"></div>
<h4>Choose</h4>
</div>
</div>
</div>
</div>
Css for .cover.orange
.cover{
position: fixed;
opacity: 1;
background-color: rgba(0,0,0,.6);
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 0;}
.cover.orange{
background-color: rgba(37, 28, 5, 0.6);}
What am I doing wrong?
Thanks for any input.
If i corectly understand what you want to do, you try to add 1 overlay by section, which you want to cover only his own section.
To do taht, I would choose to add a container for each section (to help standardize behaviour with classes) a use "absolute" positionning rather than "fixed".
.container {
position: relative;
z-index: 1;
}
.cover{
position: absolute;
opacity: 0.5;
background-color: grey;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 3;
}
.cover.blue{
background-color: blue;
}
.cover.orange{
background-color: orange;
}
<header class="text-center" name="home">
<div class="container">
<div class="cover blue" data-color="blue"></div>
<div class="intro-text">
<h1 class="wow fadeInDown">Site Header</h1>
</div>
</div>
</header>
<div id="about-section">
<div class="container">
<div class="cover orange" data-color="orange"></div>
<div class="section-title text-center wow fadeInDown">
<h2>Section 2</h2>
<hr>
<div class="clearfix"></div>
<h4>Choose</h4>
</div>
</div>
</div>
Note: your HTML snippets have issues : in the first, you forgot to close div, and in the second you close the last div twice.
I've tried about everything I can find on SO, so I'm hoping someone can point out what I'm doing wrong. I know there are extensive posts, but believe me I've tried, whats seems to be all of them...
The content area in the image below will expand as needs depending on the amount of bound data, I've only managed to horizontal center the loader, but not sure how to get it to sit in the center of the overlay. It's also worth mentioning that I'm using bootstrap.
Question:
How do I vertically center a loading animation inside another div?
Assumption:
I've been tinkering with the position and a few other options, but I'm not sure. I'm thinking the "tree" working down from the top element needs to be in a certain state to allow me to vertical center the div... but not sure what or how it can be achieved?
Working Fiddle or snippet below...
.overlay {
width: 100%;
height: 100%;
background: grey;
border-radius: 5px;
}
.overlay .overlay-modal {
line-height: 200px;
position: relative;
border-radius: 5px;
z-index: 11;
margin: 0 auto;
}
.overlay .overlay-modal p {
background-color: #f1c40f;
width: 300px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 120px;
color: white;
border-radius: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<br/>
<div class="container-fluid">
<div class="col-md-2 sidebar well">
Some Menu
</div>
<div class="col-md-6 main">
<div class="container-fluid overlay">
<div class="overlay-modal">
<p><i class="fa fa-gear fa-spin"></i>
</p>
</div>
<div class="row">
<div class="col-md-12">
<h3>Employee</h3>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 main">
Other content
</div>
<div>
You placed your position relative on the wrong element.
.overlay {
position: relative;
}
instead of
.overlay-modal {
position: relative;
}
Using this CSS worked for me.
.overlay .overlay-modal {
line-height: 200px;
position: absolute !important;
top: 50%;
left: 50%;
border-radius: 5px;
z-index: 11;
margin: 0 auto;
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
-ms-transform: translate(-50%);
-o-transform: translate(-50%);
transform: translate(-50%);
}
Is there any reason you can't use position: absolute;
I am trying to make a div with google map same as on airbnb page. Div's position with google map inside of it is fixed and gmap div's height and width are 100% and it seems when I open the page that it is that way, but the google logo on the bottom is not showing, even though when I inspect the element it doesnt show that it goes outside of the div.
#gmap {height:100%;
width:100%;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;}
.container {position: relative;
display: table;
min-height: 100%;
height: 100%;
width:100%;}
.container > div {
vertical-align: top;}
.map {position: fixed;
top: 70px;
right: 0;
min-height: 100%;
margin-right: 0px;
height: 100%;
z-index: 99;
overflow: auto;}
HTML code `
<div id="content">
<div class="container">
<div class="col-md-2">
#section('leftsidebar')
#include('layouts.pages.leftsidebar')
#show
</div>
<div class="col-md-6"
<section class="content">
#section('content')
#yield('content')
#show
</section><!-- /.content -->
</div>
<div class="col-md-4 map">
<div id="gmap">
</div><!--/#gmap-->
</div>
</div>
</div><!-- ./wrapper -->`
I have the following HTML source:
<div id="page">
<div id="header">
<!-- end header div -->
</div>
<div id="dropdown">
<!--navigator menu is here!-->
</div>
<div id="main">
<!--main is here!-->
</div>
<div id="sidebar">
<!--sidebar menu is here!--></div>
<div id="footer">
</div>
<!-- end page div -->
</div>
<div id="leftshadow"></div>
<div id="rightshadow"></div>
</body>
And this is the CSS source
/* html selectors ---- */
html, body {
font-family: 'Arial Unicode MS';
margin: 0;
padding: 0;
background-repeat: repeat-x;
background-color: white;
direction: rtl;
font-size: 10.3pt;
}
/*page -----------*/
#page {
width: 900px;
padding: 0px;
margin: 0 auto;
direction: rtl;
position: relative;
z-index: 100;
z-index: 5;
background-image: url("images/bgimage.png");
}
#leftshadow {
width: 100px;
height: 900px;
background-image: url("images/leftshadow.png");
position: absolute;
right: 1220px;
z-index: none;
top: -50px;
}
#rightshadow {
width: 100px;
height: 900px;
background-image: url("images/rightshadow.png");
position: absolute;
right: 345px;
z-index: none;
top: -25px;
}
/* header ---------- */
#header {
height: 110px;
top: 0px;
line-height: 30px;
background-image: url("images/header.png");
background-position-x: center;
background-repeat: repeat-x;
}
/* main -------------- */
#main {
line-height: 21px;
font-family: arial;
width: 625px;
padding: 30px;
position: relative;
right: 205px;
padding-bottom: 80px;
direction: rtl;
top: 42px;
padding-right: 60px;
min-height: 750px;
text-align: justify;
}
Normally I got this result
But in Internet-Explorer I got this result
I know that if I will insert the
<div id="leftshadow"></div>
<div id="rightshadow"></div>
******Live example here! http://lawb.co.il/******
Into the #page Div the problem could be solved, but the only problem is that the shadow than is complatly on the content, und not behund him
Can you pleas help me with this?
wish for help, thanks!
Any reason as to why you are using images to create shadows when you could use CSS3 box-shadow?
If you are going to use this approach I would change your HTML structure like so:
<div id="page">
<div id="leftshadow"></div>
<div id="header">
<!-- end header div -->
</div>
<div id="dropdown">
<!--navigator menu is here!-->
</div>
<div id="main">
<!--main is here!-->
</div>
<div id="sidebar">
<!--sidebar menu is here!-->
</div>
<div id="footer">
<!-- footer -->
</div>
<!-- end page div -->
<div id="rightshadow"></div>
</div>
And then float the right shadow div to the right and the left shadow div to the left. Most likely you are seeing inconsistencies because
you are not using a reset, and stuff is relatively positioned. You really don't need to position everything relative and the shadows if inside the #page container won't need to be positioned absolute.