I'm following an blog post on displaying a "Loading" image when an Ajax call is being performed. The example has all of the styles inline and it works but I'm trying to convert it to having the CSS properties in an style sheet. Everything is converting just fine except for the filter property.
Here is the original code. The filter is in the main div and it is supposed to set the back ground of page to be transparent by 50% to draw attention to the Processing message.
<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px;
top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001;
opacity: .8; filter: alpha(opacity=50); display:none">
<p class="submit-progress" style="position: absolute; top: 30%; left: 45%; color: White;">
Processing, please wait...<img src="~/images/ajax-loading.gif">
</p>
</div>
This is the CSS I'm trying to convert it to.
.ajax-loading-wrapper {
position: fixed;
margin: 0px;
padding: 0px;
right: 0px;
top: 0px;
width: 100%;
height: 100px;
background-color: #666;
z-index: 30001;
opacity: .8;
filter: alpha(opacity=50) !important;
}
.ajax-loading-div {
position: fixed;
top: 50%;
left: 50%;
height: 7em;
padding-top: 2.3em;
width: 20em;
margin-left: -10em;
padding-left: 2.1em;
background-color: black;
color: white;
border-radius: 5px;
}
.ajax-loading-text {
position: absolute;
top: 15%;
left: 20%;
color: white;
}
.ajax-loading-icon {
position: absolute;
top: 45%;
left: 39%;
color: white;
}
<div id="divLoading" class="ajax-loading-wrapper" style="filter: alpha(opacity=50) !important;">
<div class="ajax-loading-div">
<span class="ajax-loading-text">
Processing, please wait...
</span>
<span class="ajax-loading-icon fa fa-spinner fa-pulse fa-3x fa-fw"></span>
</div>
</div>
When I inspect the page I see that the filter property is crossed out. I tried adding the !Important but that didn't work. I also tried adding just the filter to the divLoading style and that doesn't work either. What I see with these setting is a small section (~25%) at the top of the page that has this background color but I'm needing it on the whole page.
That's not quite how filter works (since IE8). It requires a list of filtering functions, each given a value. A working version of your example would be:
filter: opacity(0.5); // Opacity is 0 to 1, like the CSS property
Further Reading: MDN Docs
Related
I'm used my university project for Ionic -3 I'm try to create sample image as
Avatar to set of the small icon, but its cant do that correctly , any one know how to make correctly like this
My code sample
my code
<ion-item>
<ion-avatar item-start>
<img src="assets/imgs/user.png">
<div>
<button id="notification-button" ion-button clear>
<ion-icon name="notifications">
</ion-icon>
</button>
</div>
</ion-avatar>
<h2>Woody</h2>
<p>This town ain't big enough for the two of us!</p>
<ion-note item-end>3:43 pm</ion-note>
</ion-item>
css
#notification-button {
position: relative;
width: 42px;
top:1px;
right: 1px;
overflow: visible!important;
}
#notifications-badge {
background-color: red;
position: absolute;
top: -3px;
right: -3px;
border-radius: 100%;
}
Underneath the answer, Before I saw your code...
I don't have ion stuff, but I can help you with the css, is this kinda what you need?
position: relative; on the .ion-item and to get the small button on its right place, just put this position: absolute; right: -5px; bottom: -5px; in the button
.ion-item{
position: relative;
height: 100px;
width: 100px;
}
.ion-avatar{
border-radius: 50%;
background-color: tomato;
box-shadow: 0 0 4px 3px #ccc;
height: 100%;
width: 100%;
}
button{
position: absolute;
right: -5px;
bottom: -5px;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: blue;
border: gray 1px solid;
cursor: pointer;
color: white;
}
<div class="ion-item">
<div class="ion-avatar">
<div>
<button id="notification-button">
<div class="ion-icon">
!!!
</div>
</button>
</div>
</div>
<h2>Woody</h2>
<p>This town ain't big enough for the two of us!</p>
<p>3:43 pm<p>
</div>
update
When I played with chrome web tools a bit, I found this to get the button to the point you wanted it.
#notification-button[_ngcontent-c0] {
position: absolute;
width: 42px;
top: 25px;
left: 30px;
overflow: visible !important;
}
changed your position: relative; to position: absolute; and changed the top and right, I'm not sure if your working responsive. But take a look if this helps. Otherwise, I know another good solution.
The code in question: http://jsbin.com/bisimeyija/edit?html,css,output
It works fine in Chrome / Safari / Firefox and even IE11 i believe.
HTML
<div class="img-Offset">
<div class="img-Offset_ImageContainer">
<img src="http://placehold.it/430x350" alt="">
</div>
<p class="img-Offset_Caption">Scott Preston and his wife Laura</p>
</div>
:root {
--Theme_Primary-dark: #f98183;
}
CSS
.img-Offset {
position: relative;
z-index: 1;
max-width: 520px;
width: 100%;
}
.img-Offset::after {
content: '';
position: absolute;
top: 90px;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
display: block;
background-color: var(--Theme_Primary-dark);
border-radius: 5px;
}
.img-Offset_ImageContainer {
position: relative;
padding-left: 90px;
border-radius: 5px;
border-bottom-right-radius: 0;
}
.img-Offset_Caption {
margin-top: 14px;
padding-right: 30px;
padding-bottom: 21px;
padding-left: 90px;
font-weight: 500;
color: #fff;
}
In Edge it looks like:
It should look like:
So for some reason the border-radius and top aren't working on the pseudo but everything else is.
It appears to be a problem relating to the use of CSS variables. If you change the background colour to be a simple hex value, the problem goes away.
i am trying to remove the inline css and include it into a separate stylesheet. Since it is clear to use "#" and "." for id and class, how can i externally style the "u" as in sample below. Thx in advance for any help.
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000; top: 0px; left: 0px;width: 100%; height:100%;">
</div>
<div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
Try
div[u=loading] { position: absolute; top: 0px; left: 0px; }
This is called the attribute selector (you can also do *[u=...] if you want). This won't work on earlier internet explorers (<7) or other old browsers, but will work on all modern browsers as far as I know.
I have a webpage that works well with all browsers except Safari. When I first load my page in Safari, the frot page displays all the styling corresponding to that page. However, when I click on a link to go to another page the styling for the colors and images is not recognized. I wonder if somebody knows what can be causing this. Thanks in advance.
This class named "TableLeftNav" seems to disappear:
<div class="ui-layout-west container border TableLeftNav ui-layout-pane-west" style="position: absolute; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; right: auto; z-index: 0; left: 0px; width: 248px; top: 180px; bottom: 0px; height: 71px; display: block; visibility: visible;">
and the CSS for that class is:
.TableLeftNav { background-color: #003c79; width: 275px; border: #003c79; }
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);
}