My css for a tree node icon is the following:
.icon {
background: url(http://dummyimage.com/100x100/ccc/fff);
width: 100px;
height: 100px;
position: relative;
}
.icon:after {
background: url(http://dummyimage.com/32x32/f0f/fff);
width: 32px;
height: 32px;
display: block;
content: ' ';
position: absolute;
bottom: 0;
right: 0;
}
I set iconCls to "icon" but it does not work, I also tried "icon icon:after" and "icon:after" but with no luck.
I use a modern browser and my overlay css is valid, but extjs doesnot seem to understand it. How can I overcome this problem?
The icon element is by default an <img> element. It's contents are replaced by the image. You can't use :before or :after with it, because they form part of the contents that get replaced. You will need to override the treeRenderer in Ext.tree.Column to apply your second image.
looks like you forgot the class prefix in one of youre tests try .icon:after {}
Related
On this site in the search in the header I can't click the top two AJAX search results because I think they are under another layer. (Search for: condo). I have tried messing with the z-index. I changed the background color of the header to be able to see the top two search results. Here's what I put in the child CSS:
.fusion-sticky-header-wrapper {
display: block;
position: relative;
z-index: 2;
}
.fusion-header-v2 .fusion-header, .fusion-header-v3 .fusion-header,
.fusion-header-v4 .fusion-header, .fusion-header-v5 .fusion-header {
display: block;
background-color: rgba(255,255,255,0);
position: relative;
z-index: 1;
}
.search-in-place, .item {
z-index: 10000;
}
Same results with other plugins so I know it must be in the site CSS, right? Any help appreciated.
The header bar is over the search results because of this declaration:
.fusion-header-wrapper {
position: relative;
z-index: 10010;
}
To solve this you would need to remove the z-index declaration from the header wrapper or set the z-index for the search results higher than 10010, for example:
.search-in-place, .item {
z-index: 10020;
}
So I have a div that allows me to display a QR code of the current page URL:
.page-qr:before {
content: url(https://chart.googleapis.com/chart?cht=qr&chs=100x100&chl=<?php echo current_page(); ?>?choe=UTF-8);
height: 100px;
width: 100px;
}
And used like:
<div class="page-qr"> </div>
Obviously, to get the current URL on-the-fly, I have to put this CSS styling in the <head> of my page. I am trying to move it to the stylesheet.
I had the idea to use a data attribute to specify the URL:
<div class="page-qr" data-url="https://chart.googleapis.com/chart?cht=qr&chs=100x100&chl=<?php echo current_page(); ?>?choe=UTF-8"> </div>
So, my question is, is it possible to double up the usage of content:url() and attr(data-url) in the stylesheet?
.page-qr:before {
content: url(attr(data-url)); /* Doesn't work, but you get the idea */
height: 100px;
width: 100px;
}
This is a proposed feature for attr() in css-values-3. The CSS would look like this:
.page-qr:before {
content: attr(data-url url);
height: 100px;
width: 100px;
}
Unfortunately there are no known implementations, so this still isn't possible.
I just stumbled upon the same problem, but found a solution using custom properties. So we can pass any type that is allowed as a custom property value to it. Then you can absolute position it if that is what you look for.
You can use it like this:
HTML
<div style="--img-url: url('${imgUrl}')"></div>
CSS
div {
position: relative;
}
div::before {
position: absolute;
top:0;
left:0;
width:100px;
height:100px;
content: var(--img-url);
}
See this post for further info
I know that has been asked before, but I find no clean way of overriding this CSS:
.ui-input-search:after {
content: "";
height: 18px;
left: 0.3125em;
margin-top: -9px;
opacity: 0.5;
position: absolute;
top: 50%;
width: 18px;
}
I need to leave ui-input-search on the element, but can add my own class, like:
.ui-input-search-no-pseudo:after {
content: "";
}
Question:
Is there an easy way to remove "pseudo-css" without having to overwrite the CSS line by line?
Thanks!
As far as I can tell there is no other way than to override all properties. The styles are defined on the element, they won't just disappear because of another selector that targets the element.
If you only want to remove the pseudo element from the page you can do content: none.
Added from comments below:
The difference between content: "" and content: none is that content: "" produces a pseudo-element with no content (i.e. an empty pseudo-element), whereas content: none prevents the pseudo-element from being generated at all.
Here content: ""; doesn't affect at all if you want to remove that pseudo you have to use content:none; it will remove previously added pseudo content.
content:none;
If that doesn't help you can also try :
display:none;
if still, it doesn't work then you could try the below, but I never suggest you use !important
display:none !important;
here is working jsfiddle
https://jsfiddle.net/ganeshswami99/52duu0x8/1/
How would you write this to be SASS compliant?
.fader { display: inline-block; }
.fader img:last-child {
position: absolute;
top: 0;
left: 0;
display: none;
}
Basically I'm just replicating this example of fading in one image over another (found here.)
His JFiddle example: http://jsfiddle.net/Xm2Be/3/
However his example is straight CSS, I'm working on a project in SASS and am not sure about how to correctly translate it.
My Code
Note in my example below, the img hover isn't working correctly (both images are showing up and no rollover fadein action happens)
My CodePen:
http://codepen.io/leongaban/pen/xnjso
I tried
.try-me img:last-child & .tryme img:last-of-type
But the : throws SASS compile errors, the code below works
.try-me img last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
However it spits out CSS which doesn't help me:
.container .home-content .try-me img last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
UPDATE: Working Codepen:
http://codepen.io/leongaban/pen/xnjso
Nesting is not a requirement with Sass. Don't feel obligated to do so if there's no need to break up the selectors.
.try-me img:last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
If you are applying styles to the image and then specific styles to the last-of-type, then this what it would look like when you nest it:
.try-me img {
// styles
&:last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
}
Neither of the above worked for me, so.
last-of-type only plays nice with elements, you can select things with classes all you like but this gets handled by the elements. So say you have the following tree:
<div class="top-level">
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="somethingelse"></div>
</div>
To get to the last div with the class of middle, doesn't work using last-of-type.
My workaround was to simply change the type of element that somethingelse was
Hope it helps someone out, took me a while to figure that out.
Hey why don't you use only CSS? You could remove all the JS, I mean hover is support right back to ie6. I guessed that you know there is no hover event just active on tablets..
I mean you will need to set an area for the image.. But I find it use full, especially if you want an href.
http://codepen.io/Ne-Ne/pen/xlbck
Just my thoughts..
My designer created a stylesheet that makes heavy uses of id's. Example:
<div id="globalheader">
<ul id="globalnav">....
css:
#globalheader { width: 715px; height: 100px; margin: 18px auto; position: absolute; top: 0; left: 20; z-index: 9998; }
#globalheader #globalnav { margin: 0; padding: 0; }
#globalheader #globalnav li { display: inline; }
This doesn't display correctly anymore as soon I change one of the div elements to 'runat=server' because this will cause the ClientID to change. How can I solve this?
-Edoode
This is a problem that I don't think is solvable without post generation workarounds, some of them being...
Add class attributes to the html elements and change the style declarations to .globalheader
Leave the html elements as they are and do a find and replace in the stylesheet (the new id names should have a consistent prefix e.g. #ctl00_globalheader)