I'm making a Material Design web app, and I made it so that the drawer is only one element using a :before pseudo-element to make the scrim (to darken the background and bring the drawer to prominence).
#app-bar-drawer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 350px;
max-width: 85%;
background: #fff;
z-index: 1200;
box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
opacity: 0;
pointer-events: none;
transform: translateX(-110%);
transition: opacity .1s, transform .3s;
}
#app-bar-drawer.in {
opacity: 1;
pointer-events: all;
transform: translateX(0%);
}
#app-bar-drawer:before {
background: rgba(0, 0, 0, 0.6);
position: absolute;
width: 10000%;
transform: translateX(350px);
top: 0;
left: 0;
right: 0;
bottom: 0;
content: "";
z-index: 700;
}
#media screen and (max-width: 400px) {
#app-bar-drawer:before {
transform: translateX(350px); /* this is what I can't figure out */
}
}
On larger phones, tablets, desktops, etc this works fine:
As you can see, the scrim is positioned at the edge of the drawer and covers the content neatly. However, with smaller devices, it moves too far and looks like this:
In this one, the scrim is at the far right edge of the screen, as the transform: translateX(350px) is pushing it too far. I've tried changing it to use a percentage, but percentages are of the :before pseudo-element, not the parent. When I tried using a pixel measure like 200px, it would either go too far (and wouldn't cover the content) or too close (and cover the drawer).
SUMMARY
I can't use either percentages or pixel measures. I'd rather do this without JS, but if necessary I'll do it. Is this possible? It needs to be a single element.
An alternative approach would be to toggle the psueodoelement on the body when the menu is toggled. You can set it to the full width of the viewport using position: fixed and coordinates, which avoids dealing with transformations.
Ensure the z-index of the menu is higher than the psuedoelement.
Related
When my menu opens I have put a greyed out overlay in the body. But it does not affect post images and some meta stuff...
Look https://imgshare.io/image/OyV9d
CSS
.is-menu-toggled-on body {
box-shadow: inset 0px 0px 0 2000px rgba(0,0,0,0.5);
}
How to make the overlay cover everything...?
You can simply make a overlay like this. I am showing you a regular overlay technique. use it for your code.
body {
position: relative;
height: 100vh;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0, 0, 0, 0.5);
/*dim the background*/
}
<div class="overlay">hello</div>
I'm trying to set up two types of slides in Revolution slider. There will be the main background image for the slide, then a semi-opaque layer taking up 40% of the left side or the right side of the slide, with a text layer above that. I have the following css that can achieve the semi-opaque layer for one side (right or left, in the case below, left side) using the 'after' psuedo selector:
.rev_slider .slotholder:after{
width: 40%;
height: 100%;
content: "";
position: absolute;
top: 0;
left: 0;
pointer-events: none;
/* black overlay with 50% transparency */
background: rgba(0, 0, 0, 0.5);
}'
This takes care of the one side of the transparency but not the other, so I need a slide-specific class which adds a "left" or "right" property to the parent .slotholder class. Any suggestions?
you can try to use also :before for the right side, please try use this css
.rev_slider .slotholder:after, .rev_slider .slotholder:before{
width: 40%;
height: 100%;
content: "";
position: absolute;
top: 0;
pointer-events: none;
/* black overlay with 50% transparency */
background: rgba(0, 0, 0, 0.5);
}
.rev_slider .slotholder:before{
right: 0;
}
.rev_slider .slotholder:after{
left: 0;
}
In the "Link & Seo" section, there is a field to add a class to the <li> of the slide - You can add a class (e.g. "right-text", "left-text") and apply the appropriate css rule, e.g.
left-text .slotholder:after{
width: 40%;
height: 100%;
content: "";
position: absolute;
top: 0;
left: 0;
pointer-events: none;
/* black overlay with 50% transparency */
background: rgba(0, 0, 0, 0.5);
}
I have multiple circles produced by the following CSS:
.map-circle {
position: absolute;
cursor: pointer;
border-radius: 50%;
width: 5px;
height: 5px;
z-index: 999;
background-color: red;
}
For some reason when I scale that circle to a large number, the circle doesn't stay perfect in Chrome:
.map-circle {
transform: matrix(10, 0, 0, 10, 0, 0);
}
.map-circle {
position: absolute;
left:50px;
top:50px;
cursor: pointer;
border-radius: 50%;
width: 5px;
height: 5px;
z-index: 999;
background-color: red;
transform: matrix(10, 0, 0, 10, 0, 0);
}
<div class="map-circle"></div>
Seems to be a Chrome specific bug, atleast it's looking fine in Firefox + IE. Suggestions?
Not sure if this is an issue with chrome. But when I use above code with even width and height (say 4px or 6px) it is working fine, but fails with odd widths like 5px.
This appears to be because of how closely Chrome renders the circle. If you enlarge the circle (I tried 50 px), it showed a complete circle just fine. Apparently, with certain very small sizes, Chrome doesn't try as hard to render border-radiused corners.
If you want to fix this, an SVG might be a good option. Chrome shouldn't have any trouble rendering that one properly.
I can't center my modal in twitter-bootstrap with various sizes. You can see live example here and here. (just click on the picture or "Report this image"). You'll see that modal is there working like charm, but it isn't horizontally centered. I tried everything: margins, float, text-align and even <center>
.modal:
.modal {
position: fixed;
top: 10%;
z-index: 1050;
width: auto;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
outline: none;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.modal-body:
.modal-body {
margin: 0 auto 0 auto;
position: relative;
padding: 15px;
overflow-y: auto;
}
I know it's a little late, but I found the solution to all the problem with centering the Bootstrap Modal with different heights than the standard's (one).
$("#yourModal").modal('show').css({
'margin-top': function () { //vertical centering
return -($(this).height() / 2);
},
'margin-left': function () { //Horizontal centering
return -($(this).width() / 2);
}
});
A solution that works regardless of the child element size (in this case the modal). Can also be used to center vertically.
.centered {
left: 50%;
transform: translateX(-50%);
}
Essentially what we are doing here is pushing the element right by half of the parent container's width. In the case of the modal the parent would (should) be the body. The transform property is the pulling the element left by half of its own width.
Edit: To center vertically
.centered {
top: 50%;
transform: translateY(-50%);
}
Note: I think the horizontal centering only works if the height/width of the parent are the same, as the % comes from the parent width. If they are not the same then just use the parent height.
It's not the modal body that needs centering, it's the overall modal. Since that has fixed positioning, you could do it with CSS and jQuery (since jQuery is already being used):
CSS:
.modal { left: 50%; }
jQuery:
$('.modal').each(function(){
var modalWidth = $(this).width(),
modalMargin = '-' + (modalWidth/2) + 'px!important';
$(this).css('margin-left',modalMargin);
});
Alternatively it is possible with just CSS:
.modal {
width: 100%;
left: 0;
background-color: transparent; }
.modal-body {
display: inline-block;
background-color: #FFF; }
.modal img { min-width: none!important; }
Alternative to #Coop's answer. As you have a fixed width text area there, you can set the width of the modal and use negative margins rather than jquery.
.modal {
left:50%;
width:444px;
margin-left:-222px;
}
In your current code, there is nothing that will allow the modal to center.
You can use jquery to reproduce this behaivor:
left: 50%;
width: 560px;
margin-left: -280px;
Calculating the width of the div and asign css
$(document).ready(function () {
var modalWidth = $('#myModal').width();
$('#myModal').css("left", "50%");
$('#myModal').css("width", modalWidth);
$('#myModal').css("margin", (modalWidth/2)*-1);
});
.modal-dialog
{
padding-top: 15%;
}
I'm using a framework (Sencha Touch) which applies the following style to a lot of elements, probably to speed them up on mobile devices:
-webkit-transform: translate3d(0px, 0px, 0px);
Normally, this doesn't change the way the element is displayed. But I've noticed that when an element has this style, it affects the drop-shadow filters on adjacent elements. In this example (using Chrome for Mac or Safari for iOS), the top image below is next to a translate3d element, and the bottom image isn't:
Can someone explain why this is, and whether there's a way to avoid it? It only seems to happen when the element with a shadow also has a z-index. But I need to keep the z-index.
Here's the source:
<style>
.top {
position: absolute;
z-index: 1;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid blue;
-webkit-filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.75));
}
.bottom {
height: 80px;
}
.translated {
-webkit-transform: translate3d(0px, 0px, 0px);
}
</style>
<div class="top"></div>
<div class="bottom translated"></div>
There are some minor problems when you mix GPU and CPU rendered elements.
(When you specify translate3d you are giving the rendering engine a good reason to use the GPU, that's why it is used)
Some time ago, you could see that in Canary, enabling and disabling GPU rendering.
With your fiddle, however, Canary displays ok in any mode. (27.0.1447.0)
The only way that you can get stable results, I think, is making most of the display thru the GPU. for instance:
.top {
position: absolute;
z-index: 1;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid blue;
-webkit-filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.75));
}
.bottom {
height: 80px;
}
div {
-webkit-transform: translate3d(0px, 0px, 0px);
}
updated fiddle
crude, I know, but you get the idea.