I have a modal I created using ReactDOM.createPortal();. It works well except I can't seem to style the modal in a way that works on both Chrome and Safari.
html:
<body>
<div id="main">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
</div>
<div id="portal">
<div>
<div class="modal-wrapper">
<div class="modal-card">
<div class="row">
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="background-overlay"></div>
</div>
</div>
</div>
</body>
scss:
#portal {
.modal-wrapper {
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
overflow: hidden;
max-height: 100%;
.modal-card {
background: white;
border-radius: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
z-index: 10;
max-width: 800px;
margin-top: 10px;
width: 50%;
overflow: auto;
padding: 10px;
max-height: 90%;
}
.close-button {
position: relative;
}
.background-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: black;
opacity: 0.5;
}
}
}
Please see https://jsfiddle.net/alisonmtague/am5jfr37/26/ using both safari and chrome.
On Safari the .background-overlay overlays the .modal-card and you are unable to scroll the modal (background page scrolls instead). I expect the contents of the modal I'm creating to be pretty large so I need the modal to be scrollable. Ideally I would also like the #main div to not scroll when the modal is open.
Changing the z-index does not solve things
When you open the modal, apply a class to your <body> (i.e. fixed) and:
body.fixed {
overflow: hidden;
position: fixed;
}
Obviously, you need to remove it when closing the modal.
Additionally, your modal scroll container should have:
{
-webkit-overflow-scrolling: touch;
}
..., besides overflow-y: auto; and a fixed height, smaller than 100vh. That's about it.
Note: Depending on device, Safari version and iOS version you might not need both (second one being the real important one), but with both you get max compatibility.
Ref: "On Safari the .background-overlay overlays the .modal-card and you are unable to scroll the modal":
Assuming adding position: relative; to .modal-card wouldn't work: what is stopping you from placing .background-overlay as first child of .modal-wrapper and .modal-card as second?
Related
I need layout with 3 columns with an image spanning across 2 in top right corner. Found several solutions, best one here:
Advanced CSS tricks: How to span an image over multiple columns in a CSS3 site layout?
But: Both don't work with Chrome. The negative top-margin makes the text disappear behind a non discoverable something.
I used the solution with the absolute positioning of the floater, as in the other solution the left margin of the floater would be a reason why the text becomes invisible...
I used div#floater to represent the image, has same effect.
HTML:
<div id="outer">
<div id="floater">
</div>
<div id="inner">
<h1>Title1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Title2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Title3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
And the CSS code:
#outer{
position: relative;
font-size: 10pt;
width: 100vw;
min-height: 88vh;
column-count: 3;
column-gap: 1vw;
padding-top: 54vw;
background-color: red;
}
#outer #floater{
position: absolute;
right: 0;
top: 0;
width: 66vw;
height: 50vw;
margin-bottom: 2vw;
display: block;
border: 2px solid blue;
}
#outer #inner{
max-width: 100vw;
background-color: green;
margin-top: -11vw;
}
I made a fiddle, in Chrome 'Title 1' diappears, in Safari and Firefox no problem. Any suggestions?
https://jsfiddle.net/20drzb3k/5/
You can give a try to backface-visibilty to cure that visual bug.
#outer #inner > *{
backface-visibility:hidden;
}
https://jsfiddle.net/20drzb3k/7/
For infos, Here is another example with a different approach (a pseudo element is pulling up first col content. https://codepen.io/gc-nomade/pen/boZaVJ
I've done my share of css, and think I know all the usual tricks, but this one stumped me. I'm trying to absolutely position a caption box over an image (implemented as background-image) with a list of requirements:
Should be centered
Should have max-width and max-height as percentages of the image.
Should have bottom 10% from parent, and resize up with more content
Text content over maximum size should be hidden, but the background with it's rounded border-radius corners should remain visible.
The following is the closest I've come - it fails at centering:
.container {
background-image: url('http://via.placeholder.com/400x400');
height: 400px;
width: 400px;
position: relative;
}
.caption {
position: absolute;
bottom: 10%;
margin: 0 auto;
max-width: 75%;
max-height: 25%;
overflow: hidden;
box-sizing: border-box;
background-color: rgba(75,75,75,0.4);
border-radius: 5px;
padding: 10px;
text-align: center;
color: white;
}
<div class="container">
<div class="caption">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
I know lots of ways to center of course, but none I try maintain the other requirements.
I don't mind wrapping one or more extra elements around .caption if it achieves all my aims. Anyone able to help? Thanks in advance.
Wrap the caption in another div with the dimensions and positioning you require.
.container {
background-image: url('http://via.placeholder.com/400x400');
height: 400px;
width: 400px;
position: relative;
margin: 1em auto;
}
.wrap {
width: 75%;
max-height: 80%;
position: absolute;
transform: translateX(-50%);
bottom: 10%;
border-radius: 5px;
left: 50%;
overflow: hidden;
}
.caption {
box-sizing: border-box;
background-color: rgba(75, 75, 75, 0.4);
padding: 10px;
text-align: center;
color: white;
}
<div class="container">
<div class="wrap">
<div class="caption">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation </p>
</div>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="caption">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
add left:0px and right:0px to .caption
.container {
background-image: url('http://via.placeholder.com/400x400');
height: 400px;
width: 400px;
position: relative;
}
.caption {
position: absolute;
bottom: 10%;
margin: 0 auto;
max-width: 75%;
max-height: 25%;
overflow: hidden;
left: 0px;
right: 0px;
box-sizing: border-box;
background-color: rgba(75,75,75,0.4);
border-radius: 5px;
padding: 10px;
text-align: center;
color: white;
}
<div class="container">
<div class="caption">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
I'm trying to annotate specific funtionality in an app, and the annotations appear to the side of a column of content. The column is a fixed height with custom scrollers, so I need overflow y to be auto or scroll - and overflow-x to be visible, so the annotation is visible.
I know this isn't possible by setting auto/visible on the same element, but I have seen solutions on SO where the column is set to overflow-y auto, and the wrapper is set to overflow visible - but I can't get it working.
I have a JSBin set up with my current implementation - https://jsbin.com/woduciv/edit?html,css,output
Essentially:
.wrapper {
position: absolute;
height: 100%;
width: 100%;
}
.column {
position: fixed;
left: 0;
height: 100%;
width: 25%;
overflow: visible;
}
.column__content {
position: static;
overflow-y: scroll;
height: 100%;
width: 100%;
}
Does anyone know a solution to have the x axis visibly, and y scroll enabled?
Thank you :)
Try this:
body {
height: 100%;
margin: 0;
font-family: 'Unica One', sans-serif;
background: #fff;
}
.custom-panel {
border-radius: 0;
height: 300px;
overflow: scroll;
padding: 15px;
width: 400px;
}
.custom-panel p {
min-width: 500px;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="col-sm-6">
<div class="panel custom-panel">
<p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
</div>
Hope this will help you!!
I've got my footer with four columns inside a container. It needs to be inside the container to line up with the content above.
My problem is I want the left column to have a background of red, however currently it will not stretch because it's obviously in a container.
How can I stretch it full width to the left whilst keeping it lined up with the content above.
<footer class="cf">
<div class="container">
<div class="test11" style="width: 25%; float: left; background: red;">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="test11" style="width: 25%; float: left;">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="test11" style="width: 25%; float: left;">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="test11" style="width: 25%; float: left;">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</footer>
.container {
width: 1170px;
margin: 0 auto;
}
footer {
background: grey;
}
You cannot do it directly like you said "stretch" it as far as I know.
However, I made a little workaround for you here
It consists of:
using pseudo-element :before (assigned to the first footer column using :nth-of-type(1)) which we'll use for creating same red background to place on the left of the first column
positioning the :before element to position: absolute; in order to use left: 0; which will place the red background on the left edge of last positioned element
now our :before element is positioned relatively to the closest positioned ancestor - which is in our case the html element itself. But we want it to be positioned relatively to the footer which is not positioned yet, we do so using position: relative; on it (more on that here)
adding content: " "; height: 100%; width: 25%; so it appears actually
adding z-index: -1; to which places the before element behind the actual element. Read about it here
adding z-index: 0; to the footer element to include it to the positioning context
adding background-color: red;
final added code:
footer{
z-index: 0;
position: relative;
}
.test11:nth-of-type(1):before{
position: absolute;
left: 0;
content: " ";
height: 100%;
width: 25%;
z-index: -1;
background-color: red;
}
Few tips:
Don't use inline styles. Just don't
Use cf class to wrap just the floated elements (not e.g. footer containig them in your case)
For your future questions, it would be great, if you'd provided all the relating code, so people who want to help you could reproduce (and eventually find the solution) it as quickly as possible. (I had to include clearfix to css)
Hope this helps. Good luck!
Set container class width to 100%
.container {
width: 100%;
margin: 0 auto;
}
I am having a problem setting up the css properly
Here is my small code that I play with:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { margin: 0; padding:0; }
html, body { width: 100%; height: 100%; background: #abc; }
#container { background: #eee; width: 100%; height:100%;}
#sidebar { background: #a0f; width: 200px; height: 500px; position: absolute; left: 0px; top: 0px; }
#content { background: #777; margin-left: 200px; width: auto; height: 100%; }
#wrapper { background: #357; height: auto; padding: 10px;}
#column1 { background: #0f0; width: 66%; float: left; }
#column2 { background: #f00; width: 33%; float: right; }
#text1 { background: white; width:80%; min-width: 300px; margin: 0 auto;}
#text2 { background: white; width:80%; min-width: 300px; margin: 0 auto;}
</style>
</head>
<body>
<div id="container">
<div id="sidebar">
</div><!-- end sidebar -->
<div id="content">
<div id="column1">
<div id="text1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div><!-- end column1 -->
<div id="column2">
<div id="text2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div><!-- end column2 -->
</div><!-- end content -->
</div><!-- end container -->
</body>
</html>
This is supposed to be a page with fixed sidebar on left and fluid content area on the right. In short pages I want the background color of #content extend to the bottom of screen (this works). On long pages I want that background to extend to the end of page (this does not).
I've added colors to all elements to see what's going where, but eventually the #content background will be white with 0.9 transparency, and there will be a background image on body.
How to fix that?
Update: see working example here: http://jsbin.com/AXUmALU/1/edit?html,output - just scroll the output up to see the break in colors.
I think I have what you want here. In the css I have added some selectors for a clearfix class, which is very common. It looks like this:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
And I added that class to the #content This css is from HTML5 Boilerplate, which you can google. I also changed
#content { height: 100%; } to #content { min-height: 100%; }
so that the content can expand beyond the size of the screen if it needs to.