I am setting a wrapper to be full screen with a slight opacity. Within that wrapper I have another div which is to be centered on the screen. All works, but the opacity is being applied to the inner div (loading icon and some text).
The html cannot change in the sense that .dataTables_processing will always be a wrapper no matter what.
html:
<div class="dataTables_processing">
<div class="dataTables_processing_custom">
<i class="fa fa-spinner fa-spin"></i> Please wait...
</div>
</div>
css:
.dataTables_processing {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-left: 0;
padding: 0;
background-color: #333;
opacity: 0.05;
cursor:wait;
z-index:9998;
}
.dataTables_processing_custom {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 30px;
margin-left: -100px;
text-align: center;
color:#3276b1;
font-size: 14px;
z-index:9999;
}
.dataTables_processing_custom i{
font-size:30px;
vertical-align:middle;
}
When the CSS style opacity is applied to the parent, it does it to all it's children, try using a RGBA method for a background instead:
.parent {
background: rgba(0,0,0,0.5);
}
Related
I am trying to animate the slide in/out of my flyout however it doesn't transition but appear and disappear in the same place.
in chrome devtools the animation works if I tick/untick right: 0;
How can I slide in/out the flyout correctly?
<template>
<portal to="modalPortal">
<div
v-if="isMoreOffersFlyoutActive"
:id="id"
class="flyOut"
#click.self="sendCloseModal(true)">
<div
:class="['flyOut__container', {'flyOut__container--active': isMoreOffersFlyoutActive}]">
<div class="flyOut__buttonContainer">
<button
id="storeInfoClose"
class="flyOut__button"
#click="sendCloseModal(false)">
<icon
:scale="closeButtonIconScale"
name="close"
color="white" />
</button>
</div>
<div class="flyOut__content">
<slot />
</div>
</div>
</div>
</portal>
</template>
.flyOut {
position: fixed;
top: 0;
left: 0;
z-index: z("overlay");
display: flex;
justify-content: flex-end;
width: 100%;
height: 100%;
overflow: auto;
background-color: $black-alpha;
&__container {
position: relative;
z-index: z("modal");
right: -50%;
width: 50%;
height: 100%;
background-color: $white;
box-shadow: -2px 0 15px 5px rgba(0,0,0,0.2);
transition: right ease 0.5s;
&--active {
right: 0;
transition: right ease 0.5s;
background: #ff00ff;
}
}
There isn't really an issue with Vue here. The problem stems from trying to animate a position between two different units (or in your case units and no units). Changing right: 0; to right: 10%; would probably work.
All that said, PLEASE don't animate CSS position. It's not performant and causes the browser to reflow & repaint stuff. The better solution is to use css translate(). Here's an example...
.wrapper {
/* need a positioned container for SO's editor */
position: fixed;
top:0; right:0; bottom:0; left:0;
overflow:hidden;
}
.action{
margin: 30px;
font-size: 18px;
font-weight: bold;
cursor:pointer;
font-family: sans-serif;
}
.moved{
position: absolute;
/* put the element where you want it */
top:0;
right:0;
bottom:0;
width: 150px;
background: #333;
padding: 20px;
color: #fff;
/* use transform to move to a new position (100% of element width) */
transform: translatex(100%);
transition: transform 0.5s cubic-bezier(.47,1.64,.41,.8);
}
.action:hover+.moved {
transform: translatex(0);
}
<div class="wrapper">
<div class="action">Hover Me</div>
<div class="moved">Transformed element</div>
</div>
How do I transition the .menu-trigger from position top:12px, left: 0 to its final position top: 12px, left: 120px when the .active class is added on the header? Please note that when the .active class is added the .menu-trigger becomes position: fixed and moves out of the header. That is a requirement for what I am trying to solve.
var header = document.querySelector("header");
document.getElementById('test').onclick = function() {
header.classList.toggle('active');
}
body {
margin: 0;
padding: 0;
}
header {
display: flex;
height: 60px;
background: black;
margin-top: 120px;
}
.menu-trigger {
display: inline-block;
border: none;
color: white;
background: cyan;
height: 60px;
width: 60px;
font-size: 24px;
}
header.active .menu-trigger{
position: fixed;
top: 12px;
left: 120px;
right: auto;
bottom: auto;
}
#test {
margin-top: 24px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<header>
<button class="menu-trigger">
<span class="fa fa-bars"></span>
</button>
</header>
<button id="test">Test</button>
You can just have menu-trigger always be fixed and that way you get the position right, right away
position: fixed;
top: 120px;
then when active class is added all you have to do is change position left and not worry about top or setting to static as it already will be. make sure you either make top: 120px in the active or just remove it all together since it will already be set on the base style of menu-trigger here is the pen http://codepen.io/finalfreq/pen/RGgEkq
I am trying to place a div with text on top of an image but for some reason it doesn't work. My code is:
<div id="pics">
<div class="inner">
<img src=".." class="pic" height="310" width="310">
<div class="cover">blah blah</div>
</div>
</div>
my CSS is:
#pics{
overflow:hidden;
display:block;
}
.inner a{
position:relative;
margin:3px;
padding:10px;
top:10px;
}
.inner{
position: relative;
display: inline-block;
}
.cover{
position: absolute;
background-color: black;
color: white;
left: 0;
right: 0;
bottom: 0;
top: 0px;
}
I have tried many things but it doesn't seem to work. I might have messed up my cs somewhere
That's because you're targetting an ID and not a class.
In other words, in the CSS you have the definition for an ID (#cover) and the HTML code has a class:
<div class="cover">blah blah</div>
Either change the HTML to have an ID:
<div id="cover">blah blah</div>
or change the CSS to target the class name:
.cover{
position: absolute;
background-color: black;
color: white;
width: 100%;
height: 100%;
border-style: solid 5px;
top: 0px;
}
UPDATE:
You are giving the .cover a width and height of 100%, but absolute positioned elements don't really "understand" that, so I suggest changing it to:
(place the left, bottom and right to the edges, this will fit the div as 100% width and height of the relative parent)
.cover{
position: absolute;
background-color: black;
color: white;
left: 0;
right: 0;
bottom: 0;
border-style: solid 5px;
top: 0px;
}
How about setting the picture as background via the background-image: attribute.
You then could make your div clickable with <div onclick="window.location="url";>
In detail your css would look like this:
.image {
width:310px;
height:310px;
background-image:url('pathtoimage');
}
I have a div block that overlays on top of its parent div, but when the window is resized, the child div moves around like crazy. How can I prevent that from happening. Here is the link to my site: http://raider.grcc.edu/~ryanduffing/recordstore/
Here is the relevant CSS code, and HTML code:
<div id="overlayDescription" class="my_corner">
<span id="overHeader"><span id="chevron">»</span>THE CORNER</span>
<span id="overHeader2">RECORD SHOP</span>
<p id="overContent"></p>
</div>
<div id="pictureBox">
<img src="img/storefront.jpg" />
</div>
#pictureBox{
margin-top: 10px;
margin-left:auto;
margin-right:auto;
width: 940px;
height: 420px;
position: relative;
z-index: 1;
}
#overlayDescription{
font-size: 11px;
position:absolute;
top: 290px;
right: 489px;
height: 265px;
border: 1px solid #FFFFFF;
width: 240px;
color: #FFFFFF;
background-color:rgba(0,0,0,.9);
z-index: 2;
border-radius: 100px 0 0 0;
}
#overlayDescription span#overHeader{
font-family: Arial Narrow;
position:relative;
font-size: 25px;
left: 80px;
top: 10px;
}
#overlayDescription span#chevron{
position:relative;
left: -5px;
font-family: Arial Narrow;
font-size: 35px;
color: yellow;
}
#overlayDescription span#overHeader2{
font-family: Arial Narrow;
color: yellow;
position:relative;
top: 10px;
left: 80px;
font-size: 25px;
}
#overlayDescription p#overContent{
position:absolute;
padding-left: 25px;
}
You have to make the child's absolute position relative to its parent.
#content {
position: relative;
}
#overlayDescription {
top: 140px;
right: 327px;
/* rest of the styles for this element */
}
It's because you give your child div absolute position means that this element is positioned relative to the first parent element that has a position other than static.
But as I can see from your website, all parent divs of your #overlayDescription div are static positioned element since static is the default position value.
So currently, your div are positioned according to your html element which is your window so you need to give one of its parent another position method rather then static then you'll be fine, for example:
#content {
position: absolute;
}
Set position: relative; on div.content.
Then set right: 0px; on #overlayDescription and adjust the top value to get it to sit in the right spot vertically.
I have an element that looks something like this:
___
| X|
‾‾‾
So essentially a tiny box with a button to close it.
I have also applied CSS to the element, so that when hovered, it will turn to something like this:
___________________
| X|
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
Simply put, it'll just become wider.
Now. what I want to do is that whenever the user hovers over the close button (X), the box will not change its size.
But when the user hovers on anywhere else on the box, it would behave as suggested.
Is this possible with pure CSS?
EDIT: Sorry that I added this late, but the answers should be based around this example: http://jsfiddle.net/fpY34
Using the markup you have, I have no clue how to do it without fixed widths, and absolute nastiness. But here's me giving my all! http://jsfiddle.net/fpY34/15/
<div id='outer'>
<div id='notOuter'>
<div id='content'>
<div id='img'>
</div>
<div id='label'>
Text example
</div>
<div id='closeButton'>
X
</div>
</div>
</div>
</div>
and the beauty:
#outer { height: 30px; }
#notOuter {}
#content { float: left; position: relative; }
#closeButton { background: #0f0; position: absolute; top: 0; left: 30px; width: 30px; height: 30px;}
#img { background: #f0f; width: 30px; height: 30px; position: absolute; left: 0; top: 0; }
#label { display: none; position: absolute; left: 0; top: 0; width: 60px; height: 30px; background: #f00; }
#img:hover { width: 60px; z-index: 10; }
#img:hover + #label,
#label:hover { display: block; z-index: 20; }
#img:hover ~ #closeButton,
#label:hover + #closeButton { left: 60px; }
would you check this please and tell me if that what you want ?
http://jsfiddle.net/UjPtv/10/
<style>
.divs
{
height: 20px;
width: 100px;
border: 1px solid;
padding: 5px 3px;
}
.divs:hover
{
width: 50px;
padding-left: 150px
}
</style>
<div class="divs"><span>X</span></div>
You could float them:
<div class="box">
<div>
Content
</div>
<span>X</span>
</div>
.box {display:inline-block;border:1px solid black}
.box div {width:100px;float:left}
.box div:hover {width:200px}
.box span {float:left}
Might not work in older browsers though.