As I read and understand, an absolute positioned element is ignored by the parent and removed from the DOM flow, but in my example (please see the code snippet) it's not behaving like that. In my opinion, the absolute positioned child element should be ignored by the parent div and thus the outer container shouldn't be expanded to contain the child. Why is that? And how should I solve that (keeping the containers scrollHeight unexpanded by the child)? Thanks in advance.
#container {
width: 300px;
height: 300px;
background-color: grey;
display: flex;
flex-flow: row wrap;
justify-content: center;
overflow-y: scroll;
gap: 10px;
padding: 10px 0;
}
.icon {
width: 120px;
height: 120px;
background-color: green;
position: relative;
}
#absolutePositionedChild{
position: absolute;
width: 50px;
height: 300px;
background-color: red;
top: 35px;
left: 35px;
}
<div id="container">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"><div id="absolutePositionedChild"></div></div>
</div>
The absolute positioned element is positioned relative to the nearest ancestor.
It means your absolute positioned element will position itself relative to the nearest parent element which has the property, position: relative
If it does not have a positioned ancestor, then it will use the document body.
#container {
width: 300px;
height: 300px;
background-color: grey;
display: flex;
flex-flow: row wrap;
justify-content: center;
overflow-y: scroll;
gap: 10px;
padding: 10px 0;
}
.icon {
width: 120px;
height: 120px;
background-color: green;
position: relative;
}
#absolutePositionedChild{
position: absolute;
width: 50px;
height: 120px;
background-color: red;
top: 0px;
left: 35px;
}
<div id="container">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"><div id="absolutePositionedChild"></div></div>
</div>
i'm trying to add two responsive popups in my page but since i'm new in javascript i cant figure out how to modify this code to make it work for both. So far only one works.
html
<div class="container">
<h1>Responsive Popup</h1>
<a id= "popup-trigger1" class="popup-trigger">Open PopUp 1</a>
<a id= "popup-trigger2" class="popup-trigger">Open PopUp 2</a>
</div>
<div class="popup">
<div class="popup-text">This is my popup 1</div>
<span class="popup-btn-close">×</span>
</div>
css
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
}
.popup-trigger { display: block; margin: 0 auto; padding: 20px; max-width: 260px; background: #4EBD79; color: #fff; font-size: 18px; font-weight: 700; text-align:center; text-transform: uppercase; line-height: 24px; cursor: pointer; }
body {
background-color: #E3E3E3;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
text-align: center;
.container {
max-width: 400px;
margin: 0 auto;
padding: 30px;
text-align: center;
background: white;
border-radius: 10px;
border: 5px solid #9AD3DE;
box-sizing: border-box;
}
}
p {
color: #666666;
margin: 30px auto;
text-align: center;
font-size: 16px;
}
.popup {
background: rgba(100, 100, 100, 0.6);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
> div {
border-radius: 10px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 15px 0px rgba(#000000, 0.3);
padding: 30px 15px;
/* Width of popup can be changed */
width: 70%;
max-width: 600px;
z-index: 5001;
#include transform(translate(-50%, -50%));
left: 50%;
top: 50%;
text-align: center;
border: 5px solid #9AD3DE;
}
}
.popup {
background: rgba(100, 100, 100, 0.6);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup > div {
border-radius: 10px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
padding: 30px 15px;
/* Width of popup can be changed */
width: 70%;
max-width: 600px;
z-index: 5001;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: left;
border: 5px solid #f28920;
}
.popup-btn-close {
position: absolute;
background-color: #f28920;
color:white;
top: -15px;
right: -15px;
border-radius: 50%;
width: 30px;
height: 30px;
line-height:30px;
text-align:center;
font-size:20px;
font-weight:bold;
font-family:'Arial Black', Arial, sans-serif;
cursor:pointer;
-webkit-box-shadow: -4px -2px 6px 0px rgba(0,0,0,0.1);
-moz-box-shadow: -4px -2px 6px 0px rgba(0,0,0,0.1);
box-shadow: -3px 1px 6px 0px rgba(0,0,0,0.1);
}
.popup-btn-close:hover {
background-color: #ac5918;
color: #fff;
}
.popup-text {background: #fff; color: #333; font-size: 19px; line-height: 30px; z-index: 9999;}
# Javascript#
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close
buttons */
$(popup).find(".popup-btn-close").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("#popup-trigger1").on("click", function() {
popupOpenClose($(".popup"));
});
});
This is my codepen Codepen
Your help willlll be so much appreciated.
Thank you very much!
krystel
Here is one way to have separate popups. I added another popup div, gave them unique ids, then created a data-target attribute on the triggers. I changed the trigger to work on everything that has a popup-trigger class, and then made a tweak to the wrapper code so that it will create a wrapper in the current popup rather than checking if ANY wrapper exists.
There is also a memory leak because every time you open a popup, you attach more event handlers instead of only attaching them once. I would highly recommend you rework them to avoid issues down the road. Convert them to global events on the document rather than per-popup. I did not change them below as I wanted a minimal change set so you could see what was necessary for your question.
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper", popup).length == 0) {
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if (e.target == this) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find(".popup-btn-close").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function() {
$(".popup-trigger").on("click", function() {
var target = $(this).data('target');
popupOpenClose($(target));
});
});
/* this was actually some kind of LESS or SASS/SCSS originally.
I just stripped out the unnecessary parts, but no changes were necessary */
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
}
.popup-trigger {
display: block;
margin: 0 auto;
padding: 20px;
max-width: 260px;
background: #4EBD79;
color: #fff;
font-size: 18px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
line-height: 24px;
cursor: pointer;
}
body {
background-color: #E3E3E3;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
text-align: center;
}
h1,
p,
h2,
button {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 100;
letter-spacing: 0.5px;
}
h1 {
font-size: 40px;
text-align: center;
color: #666666;
margin: 0 0 30px 0;
}
p {
color: #666666;
margin: 30px auto;
text-align: center;
font-size: 16px;
}
.popup {
background: rgba(100, 100, 100, 0.6);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup>div {
border-radius: 10px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
padding: 30px 15px;
/* Width of popup can be changed */
width: 70%;
max-width: 600px;
z-index: 5001;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: left;
border: 5px solid #f28920;
}
.popup-btn-close {
position: absolute;
background-color: #f28920;
color: white;
top: -15px;
right: -15px;
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 20px;
font-weight: bold;
font-family: 'Arial Black', Arial, sans-serif;
cursor: pointer;
-webkit-box-shadow: -4px -2px 6px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: -4px -2px 6px 0px rgba(0, 0, 0, 0.1);
box-shadow: -3px 1px 6px 0px rgba(0, 0, 0, 0.1);
}
.popup-btn-close:hover {
background-color: #ac5918;
color: #fff;
}
.popup-text {
background: #fff;
color: #333;
font-size: 19px;
line-height: 30px;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Responsive Popup</h1>
<a class="popup-trigger" data-target="#popup1">Open PopUp 1</a>
<a class="popup-trigger" data-target="#popup2">Open PopUp 2</a>
</div>
<div id="popup1" class="popup">
<div class="popup-text">This is my popup 1</div>
<span class="popup-btn-close">×</span>
</div>
<div id="popup2" class="popup">
<div class="popup-text">This is my popup 2</div>
<span class="popup-btn-close">×</span>
</div>
I’m using mapbox.directions v0.3.0. I have come across a bug with the Zoom Control when using Internet Explorer only. It works fine with Edge, Chrome, and Firefox. I have the following layout:
<div id="pnlMapControl">
<div id="pnlRoutePane">
<div id="divRouteInputs"></div>
<div id="divRouteErrors"></div>
<div id="divRouteDirections">
<div id="divAlternateRoutes"></div>
<div id="divRouteInstructions"></div>
</div>
</div>
<div id="pnlMap"></div>
<div id="pnlStatusBar">
<span id="lblStatus">Status</span>
<span id="lblLatLon" style="float:right">LatLon</span>
</div>
</div>
pnlMapControl is a top level container control. pnlMap is the container for the Mapbox map. pnlRoutePane is where I want to have my input controls and display the instructions. I would prefer to keep the controls separate from the map container. pnlRoutePane is positioned on the left (and its visibility is toggled on and off so it is only visible when working with a route), and pnlMap is on the right.
My issue is, in IE11, when I click the zoom control on the map, it causes the parent pnlMapControl container to move left the width of pnlRoutePane and displays the Mapbox map at left position 0. All other browsers work without this issue. Is there something that can be done so that it will also work with IE?
Thanks in advance. My CSS is below:
#pnlMapControl {
position: absolute;
left: 0px;
right: 0px;
top: 60px;
bottom: 0px;
background-color: red;
}
#pnlRoutePane {
position: absolute;
left: 0px;
width: 300px;
top: 33px;
bottom: 20px;
background-color: lightseagreen;
display: none;
}
#pnlMap {
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: lightyellow;
}
#pnlStatusBar {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
height: 20px;
background-color: lightblue;
}
#lblStatus {
margin-left: 5px;
vertical-align: middle;
}
#lblLatLon {
margin-right: 5px;
vertical-align: middle;
}
#divRouteInputs {
position: absolute;
top: 10px;
left: 10px;
width: 280px;
height: 80px;
background-color:yellow;
}
#divRouteErrors {
position: absolute;
top: 120px;
left: 10px;
padding: 10px;
border-radius: 0 0 3px 3px;
background: rgba(0,0,0,0.25);
}
#divRouteDirections {
position: absolute;
top: 120px;
left: 10px;
bottom: 0px;
overflow: auto;
background: rgba(0,0,0,0.8);
}
I have the following code for my flexbox overlay
.overlay-content-wrapper {
display: -webkit-flex;
display: flex;
position:fixed;
height: 100%;
width: 100%;
top: 0;
z-index: 999;
background-color: rgba(0, 0, 0, 0.6);
padding: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.overlay-content {
padding: 8px;
min-height: 10px;
min-width: 10px;
margin: auto;
background-color: #fff;
border-radius: 8px;
border: 1px solid #a5a5a5;
position: relative;
}
<div class="overlay-content-wrapper"><div class="overlay-content">Some content</div></div>
In Chrome it works perfectly but in iOS safari (v6 simulator) it doesn't center vertically. What do I need to change to get it to work?
After digging around for a while I discovered that iOS safari supports one of the old syntaxes with teh webkit prefix (given its market share it's surprising more flexbox tutorials/tools don't include the old syntax... but hey ho).
So here is my final CSS which should work in every browser that supports some version of flexbox and falls back to just horizontal centering in other browsers.
.overlay-content-wrapper {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
position:fixed;
height: 100%;
width: 100%;
top: 0;
z-index: 999;
background-color: rgba(0, 0, 0, 0.6);
padding: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.overlay-content {
padding: 8px;
min-height: 10px;
min-width: 10px;
margin: auto;
background-color: #fff;
border-radius: 8px;
border: 1px solid #a5a5a5;
position: relative;
}
I had the same problem; aligning children (one headline and one icon) of a flex container with align-items: center. The icon aligned correctly at center but my headline aligned with top because of it's height.
Adding align-self: center to the headline CSS solved it!
Well, i have one centered div used as a footer simply by: <div id="bottom-footer">Powered by Coolname</div> and the style:
#bottom-footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 1px;
text-align: center;
}
And that renders ok in PC browser:
But when you tried on an iphone, its looks like this:
Clearly not centered, what im doing wrong?
looks like there is a margin or a padding on the containing body element or the div itself. Add this to your style sheet to reset the browsers natural behaviour:
html {
margin:0px;
padding:0px;
}
body {
margin:0px;
padding:0px;
}
#bottom-footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 1px;
text-align: center;
margin:0px;
padding:0px;
}
Remove width:100%
#bottom-footer {
height: 20px;
position: absolute;
bottom: 1px;
text-align: center;
}