I have one angular component with the html as following:
<!-- dynamic content generated runtime -->
<div class="test">
<div class="testinside">
HELLO
</div>
</div>
Now I want to style for one class in the part of [dynamic content generated], so my scss as following:
:host {
display: inline-block;
vertical-align: middle;
> .test > .testinside {
color: red;
}
> select {
display: inline;
}
> .combobox-container > .input-group {
color: red;
}
}
[.combobox-container > .input-group] is the css setting for the dynamic content.
However, it seems that the css for dynamic content is not effected :( (the css for static content is OK)
The dynamic content is as following:
<common-combobox _ngcontent-hdj-67="" ...>
<!-- dynamic content generated runtime -->
<div class="combobox-container combobox-selected">
<input type="hidden" name="" value="2">
<div class="input-group">
<input type="text" autocomplete="off" placeholder="Anrede" class="combobox">
<span class="input-group-addon dropdown-toggle" data-dropdown="dropdown"> <span class="caret"></span> <span class="glyphicon glyphicon-remove"></span> </span>
</div>
</div>
<div _ngcontent-hdj-35="" class="test">
<div _ngcontent-hdj-35="" class="testinside">
HELLO
</div>
</div>
</common-combobox>
Can anyone help me to show the points I missed?
Use :host /deep/ to force child component use style
https://angular.io/docs/ts/latest/guide/component-styles.html#!#-deep-
Here is Live example from Angular, see hero-detail.component.css
Update from #Joseph Briggs
The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.
In short, ::ng-deep will replace :host /deep/until next notification from Angular.
Set the viewEncapsulation for that component to None.
Related
I've got the following code, that's basically an Auth0 login form and it includes the logo image as an img element, which has it's own shadown tree: It looks like this:
<div class="auth0-lock-header-welcome">
<img alt="" class="auth0-lock-header-logo" src="/supp/pixel.png">
#shadow-root (user-agent)
<span>
<img />
</span>
<div class="auth0-lock-name" title="Log in">Log in</div>
</div>
How do I select the <span> in the #shadow-root, the <img> or even both in a classic .css file? Or do I have to write some React code for it?
Here's what I tried (none worked):
.auth0-lock-header .auth0-lock-header-logo::shadow #shadow-rootspan{
display: none;
}
:host(.auth0-lock-header .auth0-lock-header-logo #alttext-image) {
display: none;
}
PS: Sorry if it's a stupid question.
Assuming the html structure below I need to override a style in the app-dropdown__trigger__icon class based on the existence of an ancestor with class ancestor-module. I'm using ember so the app-dropdown__trigger__icon and the ancestor-module live in separate modules i.e. I cannot easily reference the ancestor from the child's scss. Is there a way to achieve conditional styling based on an ancestor's class?
<td id="ember1249" class="lt-cell align-center ember-view">
<div id="ember1254" class="ember-view">
<div class="ancestor-module">
<div id="ember1259" class="ember-view">
<div id="ember1264" class="__app-dropdown__aa494 ember-view">
<div id="ember1274" aria-owns="ember-basic-dropdown-content-ember1269" tabindex="0" data-ebd-id="ember1269-trigger" role="button" class="app-dropdown__trigger ember-basic-dropdown-trigger ember-view">
<span class="app-dropdown__trigger__icon">
<i id="ember1275" aria-hidden="true" class="fa fa-house ember-view"></i>
</span>
</div>
<div id="ember-basic-dropdown-content-ember1269" class="ember-basic-dropdown-content-placeholder" style="display: none;"></div>
</div>
</div>
</div>
</div>
</td>
I don't know how ember.js affects this, but in normal CSS, I would do it like this:
.app-dropdown__trigger__icon {
color: green;
}
.ancestor-module .app-dropdown__trigger__icon {
color: red;
}
As far as I know, SCSS does not affect this solution.
Is there a way to change the default styles of AngularJs search box?
<div ng-controller="PersonListCtrl">
<div class="bar">Search:
<input ng-model="query">
</div>
<ul class="" ng-show="query">
<li ng-repeat="person in persons | filter:query">{{person.name}}</li>
</ul>
</div>
</div>
I would like to change the colour and size of the search box and perhaps change the text colour. I've messed around in the CSS but it doesn't seem to be effecting anything.
I've tried
#bar {
background-color: #d7d7d7;
color:#000000;
}
and
.bar{
background-color: #d7d7d7;
color:#000000;
}
AngularJS does not introduces any styles as far as I know. You need to assign the id or the class to the HTML element:
<input ng-model="query" id="bar">
or
<input ng-model="query" class="bar">
You're currently targeting the wrapper of the input, you could just use
.bar input {
instead
Is there a way to set a css selector's style to be the same as another selector (class in this case) that was earlier defined without javascript?
specifically, my problem is applying bootstrap button classes (btn-small, btn-mini) to different buttons without changing it manually. The reason is that I am replacing the buttons with javascript and since I don't want to rewrite a lot of the code, I want the class to be exterior from the html
so instead of having
<div class="mini">
<a class="btn btn-mini"> some_link </a>
</div>
and
<div class="small">
<a class="btn btn-small"> the_same_some_link </a>
</div>
I could do
<div class="link small">
<a class="btn"> the_same_some_link </a>
</div>
and using css do
.small a{
import .btn-small
}
.mini a{
import .btn-mini
}
could this be achieved with css or scss/sass?
You can do this with Sass by using selector inheritance via #extend.
A solution with SCSS:
.small a{
#extend .btn-small;
}
.mini a {
#extend .btn-mini;
}
Edit: as noted in the comments, you also need to:
#import "twitter/bootstrap"
Basically is what is says in the tin.
I have an input tag and independent javascript to control it. When they user is inserting data it changes one of its' classes automatically so that its color is changed by CSS which is defined elsewhere Until then everything is ok. Next: I want the whole div that contains that input to change color so that the user can be warned when something is wrong. There's a problem here: How can I select that div I want to select only using CSS?
Here's some code that works for the input:
input.wrongVal {
border-color: red;
background-color: red;
}
input.wrongVal:active{
background-color: white;
}
Here's the relevant code from the page:
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
How can I, with only CSS, select for styling the div shown here (and no other div) with, for instance, another background?
You can't do that with CSS. What you can do however is use Javascript to either change the class of the div container or wrap the div container into another div.
<div class="infoinputContainer invalid">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
or:
<div class="invalidInput">
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
</div>
You can't. Not with pure CSS.
CSS selectors only select/target children or descendants for performance purposes: if you could target :parent (like in jQuery) the browser would have to wait to render any of the page until it had processed all child nodes.
You'll have to use JavaScript instead.
You can't with just css.
What are you using to change the class when a user enters information? If it's javascript, you can use that to change the class of the parent (or grandparent) as well.