I have two pages and I am trying to navigate between two pages each of them has "mat-tab"
the style of the first one has:
::ng-deep.mat-tab-header {
height: 12vh;
}
the style of the second one :
::ng-deep.mat-tab-header {
height: 8vh;
}
after navigating from the second page to the first page again still the height 8vh
and I think the conflict because I am using '::ng-deep' so is there a way to change .mat-tab-header height without using '::ng-deep' ?
I'm not sure if it's customizable in that way that you need, but you can achieve that with ::ng-deep alongside with :host selector. In that way you will bound styles to your component.
For example:
:host ::ng-deep .mat-tab-header {
height: 12vh;
}
:host ::ng-deep .mat-tab-header {
height: 8vh;
}
That should solve your problem. Hope that helps.
Related
I am working on a quasar/vue app. I want to style the dialog popup within one component. I'm using scoped CSS, and if the CSS is not scoped, the style works. If the CSS is scoped, the CSS does not work. I only want to style this dialog in this one component.
The template code calling the dialog:
<div class="-nav">
<q-select
outlined
dense
v-model="select"
:options="options()"
behavior="dialog"
style="width: 100px"
/>
The CSS element is:
<style scoped>
.q-dialog__inner {
width: 400px;
background-color: red;
}
</style>
This does not work:
:deep(.q-dialog__inner) {
width: 400px !important;
background-color: red;
}
I noticed that the global quasar style is marked with !important
codepen: https://codepen.io/kiggs1881/pen/oNoOzEj
.q-dialog__inner > div {
width: 400px !important;
background-color: red !important;
}
hope it helps
Have you tried to put the parents class in front of the selector like this?:
(If have seen this here) and it worked for me inside an expansion item.
.q-dialog :deep(.q-dialog__inner) {
width: 400px !important;
background-color: red;
}
I think everything is provided in the quasar.dev documentation if that doesnt help try using on hover => funtion-To-Display-Popover-In-Specific-Component
there are many ways to counter this problem using scoped is not the only one
Hi I am using a child component which is used globally in my app. So now i want to change few CSS properties for this child component only when it is specific to my requirement. I want to apply different properties for description and end class here. How can achieve this using SCSS and is it possible we can acheive it without important tag ?
*****HTML*******
<my-parent class="parent">
//I have added myflag to identify this has to apply only in case of my scenario
<global-child [class.myFlag]="myFlag===true">
<div class="child">
<div class="description">test</div>
<div class="end">end</div>
</div>
</global-child>
</my-parent>
This is how i tried to apply my css, it is picking up height but not color for description
*****SCSS******
global-child.myflag{
height: 100px !important
&.description{
color: blue !important
}
}
Edit 1: Kenny's answer looks good, but it still didn't work for me. The reason i am thinking is below. If that is correct how can achieve this in my scenario.
"I am adding the new CSS in my-parent.scss. And global child component has its styles in global-child component.scss. I believe my new SCSS code(which is parent) is loading before globalchild. Would that be a reason it is not reflecting on the page? "
Edit 2:
Updated few changes in HTML above and below are my child and parent css
****global child css****
.child {
display: flex;
flex-direction: row;
&-description {
width: 100%;
color: BLACK;
position: relative;
}
}
****Parent css*****
.parent{
global-child.myflag {
height: 100px;
.description {
color: blue;
}
}
}
This will work
global-child.myflag {
height: 100px;
.description {
color: blue;
}
}
Now when to use &
When you have class on same element
Like if you have element like
<global-child class="myflag description">
Then you should use & to apply properties to global-child element
But in your case .description is child of global-child element.
So this will work
global-child {
&.myflag {
// css properties
.description {
// css properties for `.description` those are child of `global-child.myflag
}
}
.description {
// css properties for `.description` those are child of only `global-child
}
}
Kenny's answer's were right for applying the CSS styles, But the issue for me was due to style scopes in angular. Providing viewEncapsulation as NONE on my angular component resolved the issue for me.
I started using the ng-bootstrap Typeahead component and I'm pretty happy with that.
One thing I would like to achieve is to get the dropdown items to have the same width as the input field, while the default behavior applies a width accordingly to the text length. It should be basic CSS...
I created a basic Example in Plunker.
As you can note, the applied style is ignored:
.dropdown-menu { width: 100%;}
While if I use browser dev tools, and apply the same it is applied.
Any idea on how to achieve the result, by using CSS?
Add encapsulation: ViewEncapsulation.None to the component
import {Component, ViewEncapsulation} from '#angular/core';
#Component({
selector: 'ngbd-typeahead-template',
templateUrl: 'src/typeahead-template.html',
styleUrls: ['src/typeahead-template.css'],
encapsulation: ViewEncapsulation.None
})
See updated plunker
Without ViewEncapsulation.None, the styles applied in this component will only effect this component and not any other component on this page.
Read this for more information
For me works ng-deep. Looks more safe and scoped:
::ng-deep .dropdown-menu { width: 100%; }
This is how I made it work within responsive col :
::ng-deep ngb-typeahead-window.dropdown-menu {
width: calc(100% - 30px);
}
or
::ng-deep .dropdown-menu.show {
width:calc(100% - 30px);
}
Not sure which one is the best option but I tend to think of the first one.
#Nandita's answer is correct, directly apply a width to dropdown menu won't affect.
And you want the dropdown menu to have same width as input, so you should add below CSS to her answer:
.dropdown-menu { width: 300px;}
Check result:
https://next.plnkr.co/edit/YvOymCLAwYgU3VmJ
This code 100% work, but with the class .dropdown-menu any other dropdown will be changed
::ng-deep .dropdown-menu { width: 100%; }
So I just used this code with ngb-typeahead- as the ID:
::ng-deep [id^="ngb-typeahead-"]{
width: 100%!important;
white-space: nowrap!important;
overflow: hidden!important;
text-overflow: ellipsis!important;}
Expanding on Nandita Sharma's answer, when turning off ViewEncapsulation in Angular it's probably a good idea to scope any CSS rules to the component. This will avoid generically named classes from leaking out in the global CSS scope.
A really simple way of doing that is to scope everything inside of the component's selector:
// Name of the component containing the typeahead
app-parent-selector {
// Rules added here won't leak out into the global CSS scope
.dropdown-menu {
width: 400px;
}
}
It would also be wise to avoid any approach that uses shadow-piercing descendant combinators (::ng-deep, /deep/ or >>>) because support for them is gradually being removed from all major browsers and will eventually be removed from Angular.
The best thing to do would be adding this globally, provided you plan to use the type-ahead field the same way in all your pages. If you have a styles.scss which can hold all the global styles, add this there:
ngb-typeahead-window {
width:calc(100% - 30px);
.dropdown-item {
overflow: hidden;
text-overflow: ellipsis;
}
}
Using scss should do the trick. Find the parent div in your dom, and give it a class 'dropdown-wrapper'.
.dropdown-wrapper {
.dropdown-menu {
width: 90%;
}
}
Add this to your global scss. Cheers!
I'm trying to add ngx-charts-gauge on angular5 app page.
Following these : https://swimlane.gitbooks.io/ngx-charts/content/charts/gauge.html
Everything works fine except I don't find any way or attribute or info to change Big center title color...It stills black !
I tried to override css class...with no chance.
.chart-container {
color: white;
}
Any help would be appreciated.
Thanks.
Change your css as below it will work
:host /deep/ .chart-container {
color: white;
}
OR
:host ::ng-deep .chart-container {
color: white;
}
Reason: Component style only applies to the html in component.
To force a style down to the child component use /deep/
documentation, another reference
I upgraded to Angular2 final release this morning and noticed that the CSS styles I was using in previous release candidates are no longer working. I need to control the look a HTML element wihtin a child component from the parent.
Here's my HTML:
<div id="intro">
<stm-video [video]="PageData.WelcomeVideo"></stm-video>
</div>
Here's my CSS:
:host ::shadow
{
stm-video
{
.video-container
{
height: 80vh;
width: inherit;
}
}
}
.video-container is a HTML element inside . I want to set the height of video-container when it's loaded in parent page. This used to work in Angular2 RC 4 and 5. Stopped working today after installing Angular2 final release.
Is there a more appropriate way to handle this?
Thank you Gunter and Clint. With your suggestions, here is what I arrived at for solving this problem (using LESS to generate CSS):
#deep: ~">>>";
:host
{
stm-video
{
#{deep}
{
.video-container
{
height: 80vh;
width: inherit;
}
}
}
}
having #{deep} directly under :host affects all child nodes, but putting it inside the child element just affects the styles within that child node (stm-video).
:host is still supported.
::shadow is not supported. As far as I know it never was.
::content is ignored.
/deep/ and >>> are equivalent and are both still supported.
:host >>> {
stm-video {
...
should do what you want.
See also Custom Styling on <ng-content> in angular2 not working ?
I think what you are looking for here is /deep/. It applies the styles down through child components. In your parent styles you would have.
/deep/ .video-container
{
height: 80vh;
width: inherit;
}