i try to hide several polymer elements on a certain element condition. I'm aware that there are several possibilities. In my opinon the easiest way to do this is to introduce a new CSS class
.invisible {
display: none;
}
and add it to the class list of the polymer elements
this.$.icon.classList.add('invisible');
this.$.text.classList.add('invisible');
this.$.button.classList.add('invisible');
But this has no effect on the elements. The elements are still visible. A look into the elment inspector shows, that the class was added:
class="style-scope parent-elem invisible"
Where parent-elem is the name of the parent element.
Can anyone explain me why the element will not be hidden?
Thank you
Best Regards,
Meisenmann
you can easly manipulate on your elements with parent property. Try in your element properties add property
properties: {
...
elementsVisible: {
type: Boolean,
value: true
}
...
}
then in your method manipulate this property and in html component set
<element hidden="[[!elementsVisible]]" ></element>
ps. if this wont work you can add in parent css
[hidden] {
display: none;
}
sometimes polymer elements need special mixins to customize their css, but hidden usually works :)
Related
I've an element I want to style only if it's got two classes applied to it:
custom-select-value--companies
and
custom-select-value--companies-disabled
It's actually the pseudo element I want to style, and the following css works:
.custom-select-value--companies.custom-select-value--companies-disabled::after { // Styles }
It's probably very simple, but I was just struggling to translate that to sass and was hoping someone could help? The following doesn't work:
.custom-select-value {
&--companies.&--companies-disabled::after {
// Styles
}
}
Also, just wondered as I was writing this - what's the main element of a pseudo element called? "Parent" doesn't seem quite right?
Thanks
Managed to get it working by typing the second selector out in full:
.custom-select-value {
&--companies.custom-select-value--companies-disabled::after {
// Styles
}
}
First - sorry for the title - if you have a better suggestion as to what it should be named then please let me know.
I'm not sure if this is possible in the CSS hierarchy.
I have multiple elements and each one can have a .show class added to it, to show the the content.
I'd like to set a rule, so if the .show class has been added - any of the same element without (.show) it are then hidden.
My current not working attempt is to use:
.team_item {
display: grid;
&.show {
&:not(.show){
display: none;
}
}
So the logic would be:
element - should be visible
element + show class - element & inner content visible
element + show class - all elements without the show class should be hidden (display: none).
But I think I am trying to go back up the hierarchy in the CSS (scss).
Any help would be great.
Note: I'm fully aware that I can write JS to tackle this issue but was looking for a css (scss) solution.
I believe it needs to be along those lines:
$team-item-display:'block';
.wrapper {
#function hideElement() {
$team-item-display:'none';
#return 0;
}
&.show{
hideElement()
}
&:not(.show){
display:$team-item-display;
}
}
The direction of the solution is in calling a function that will set a different value of a variable that elements with no .show class use.
I havent tested the code. Hopefully it works.
Two elements have the same class name, in my case, "img"
Is it possible to style the elements differently that are children of two different classes, even if they have the same class name?
I want the img elements under class "slide-type-final" to be styled different to the img elements under "question-2"
.slide-type-final>img {
max-height: 40em;
}
.question2>img {
max-height: 40em;
display: inline-table;
}
img isn't a class name in this case, is it? Apart from the solution you already have in your question (?), ...:
1.) You can apply a second class to the parent(s), like <div class="slide-type-final up"><img scr="...">, whose img child you would address as slide-type-final.up>img { ... }
2.) You can apply different classes to the img tags, like <div class="slide-type-final"><img class="up" scr="...">, which you would address as slide-type-final>img.up { ... }
it would be helpful if you can provide html structure. and yes, css styles can be override based on parent element/class.
if styles in your code are not overriding, that means hierarchy is not correct.
'>' symbol means img tag (note not class as to catch img class you should have .img) should be direct child of element with class slide-type-final or class question2. if weight of classes are same, then whatever style come last will apply
You can use pseudo-classes like nth-child(2n)/first-child/first-of-type/last-child
Or :not(:last-child) etc.
I need to pierce the styles of my component from the global styles.scss file.
Basically, I've used mat-card component wrapped in a custom-component. In
some cases, I want to change styles to the mat-card when a custom-component is preceded by another custom-component
The idea would be:
global-styles.scss
custom-component ~ custom-component::ng-deep {
.mat-card {
background-color: red;
}
}
The host-context seemed like a good idea, I tried it this way
custom-component.scss
// does not work
host-context(~custom-component) { background-color: red; }
I've tried this and some other combinations, but they don't seem to work. How are we supposed to use the >, ~, + selectors to style angular components?.
Cheers
Personally I avoid piercing selectors at all costs. It breaks the entire component model, and tightly couples code.
I would approach this in a slightly different way. I would have my custom-component have an optional Input() embedded = false
Your usage could be as follows:
// top level
<custom-component></custom-component>
// nested level
<custom-component [embedded]="true"></custom-component>
Then use ngClass with the embedded property to trigger the color change.
See docs for more info on ngClass
https://angular.io/api/common/NgClass
Ok not a solution for this, but there's one thing to consider.
If you want to apply styles to your component using the selector your-component, you have to set display: block; property in your component :host. I totally missed this, but it would look like this:
your-component.css
:host {
display: block;
}
your parent component css
your-component ~ your-component {
margin-top: 15px;
}
And it works. My problem was originally related to that.
I was wondering how I could set up css pseudo classes, specifically hover so when I hover over an element, like a div with an id, the properties of a different div with an id get changed?
so normally it would be this:
#3dstack:hover {
listed properties
}
I'm not sure what the change would be to have it hover on div with the id 3dstack and have it change another div.
I do not think that is possible unless the element you want to change the properties of is a descendent or a sibling of the hovered element, in which case you can do:
#myElement:hover #myElementDescendent {
background-color: blue;
}
/*or*/
#myElement:hover + #myElementSibling {
background-color: blue;
}
Of course you can always use jquery to do this:
$("#anelement").hover(
function() {
$("otherelement").css("background-color", "blue");
});
See the differences here
This is not possible with CSS alone. You'll have to use a JavaScript event handler. For example, with jQuery's hover:
$('#3dstack').hover(function() {
$('#otherID').toggleClass('properties');
});
DEMO
Visually you can do this using LESS, but under the hood it's actually using JavaScript.