I'm working on an angular 4 project and I'm trying to override css in a specific component. My changes also show up after compiling but they are not affecting the element. The element sits in a parent component, but I already tried using :host.
Element:
Generated CSS:
I had this same problem and I found out you can style your children component from its parent. The generated css never match what you want. See the picture.
I solved it by passing a state info(expanded #input attr) to the child component and styling it according to this state value as so:
Image illustrating my point
...
Related
How to style a row in ngx-datatable component? Here is an example in component's documentation:
https://swimlane.github.io/ngx-datatable/#css
When I run same demo only one row has background color set.
Here is my demo
In order to style properly the child component from the parent component, you can use one of the methods specified in this link. Preferably use the answer 3 in the link which will prevent the use of deprecated selector like :deep:. You can fix the color not appearing in even rows by
/deep/ .age-is-ten { background: #ffc91f !important;}
I'm relatively new to angular. In the process of converting a React app to Angular just for learning purposes. I have a parent component that has a button (Custom Button Component). This button when loaded in the parent should be hidden and on hover should show the button. So you probably get an idea that I have some CSS selectors related to the parent component that override the child CSS. First should be display: none and then on hover I change it to display: flex
So the first problem I encountered was that I could not override the child CSS from the parent CSS. After reading all kinds of posts I moved the CSS overrides from the parent CSS to the global stylesheet and also added encapsulation: ViewEncapsulation.None to the child component.
Next thing I noticed is that the align-items: center was not working on the child. First thought I had that guess I have to add that part to the global styles also? but what I really need to know is that is this the norm in Angular? If yes, then some things don't make sense to me. These styles are really not global. They are only related to the parent component then it seems kind of weird to add those to the global stylesheet.
In regards to the align-items not aligning the child (custom-button), I believe that happens because of the extra div being added around the button. So how do you handle such situations?
Appreciate any advice/tips.
Thank you!
You can overwrite children CSS classes from the parent componet. this is the way:
Assuming your child component have this CSS
.child-class {
background-color: blue;
}
When you use this component the background color will be blue. But if you want to change that color to RED. In the parent component where you want the change you need to do this:
In your parent component
:host {
::ng-deep{
.child-class {
background-color: red;
}
}
}
:host this refers to the component's HTML tag (that is created by Angular, in your case the tag of the component that contains the app-custom-button). Also you can apply css to the component tag.
for example:
:host{
width: 100vw;
height: 100vh
}
And with ::ng-deep you can overwrite ALL styles inside your compoent. Does not matter if is a style from your child compoenent, grandchild, great-great-grandson, etc... even if its a component from an external library.
So... For example you can have the "custom background color as blue" then in one component you can keep that color but in other component you can change the color to red and in other component you can change the color to green....
Angular have the concept of ViewEncapsulation. By default, the value is set to ViewEncapsulation.Emulated and the css you put in the component is specific to the component and only to this component. The CSS will not be applied to the child components.
You can switch to ViewEncapsulation.None and you will disable this behavior and all the css rules in your css file will be applied to all your components in the application, and maybe you don't want this behavior. That's why I advice you to leave this option.
The other option you got is to put your specific css rule in src/style.css (if you didn't modify the default path). All css rules put in this file will be applied for all the application and you can keep the ViewEncapsulation of your component.
For align-items, i think you are right : the app-custom-button is wrapping your button, so you need to set a width: 100% to your button, then eventualy resize your app-custom-button
How to style the default/placeholder text of an <ion-select> component in the Ionic framework? The default text is inside the shadow root, so therefore the HTML element has a class of "select-placeholder" it cannot be accessed via traditional CSS.
framework.com/docs/api/select#css-custom-properties
The docs for ion-select mention to use custom properties but there are only two custom properties:
--placeholder-color
--placeholder-opacity
Both work fine for updating the color and opacity, but I would really like to specifically update font-weight and font-style, and there aren't custom properties for those.
The Ionic team mentions that if there are not custom properties, to "access the shadow root of the element and apply the styles yourself in JS." But they don't expand on how to do that.
How, specifically, can I add styles in the shadow root of Ionic components where a custom property is not supplied?
TLDR; Add the part attribute to the placeholder element inside the shadow dom and then style using ::part(thePartName) in css.
Here was my solution (I didn't love it). And by the way I am on Ionic 4.
So ultimately, the problem with styling elements inside the shadow DOM of certain ionic components, is that traditional CSS selectors from an outside* style stylesheet have zero affect on elements inside the shadow dom. This is one of the main points of the shadow DOM: to create encapsulated components where CSS doesn't leak in and doesn't leak out. There are two exceptions that I'm aware of:
1 - Use one of Ionic's CSS variables (aka CSS Custom Properties). These are limited to --placeholder-color in Ionic 4 and adding --placeholder-opacity in ionic 5. I happened to be on ionic 4 so i couldn't take advantage of the opacity variable. However to use these custom properties you would do so like this:
ion-select {
--placeholder-color: 'hotpink';
}
I needed to style font-weight, font-style, and opacity so I needed another solution other than CSS Custom Properties.
There is a second way to style elements inside the shadow dom and that is using the ::part() pseudo element.
html that lives in the shadow dom provided by Ionic:
<div part="SorryIonicDoesntAddThisAttribute" class="select-text select-placeholder>my text</div>
Your css:
::part(thePartName) {
opacity: 1;
font-style: italic;
font-weight: normal;
}
If the "part" HTML attribute exists on the element inside the shadow dom its like a portal into the shadow dom.
However in Ionic 4, Ionic doesn't add the part attribute to the ion-select component's elements in the shadow dom.
I used javascript to add it (inspired by #ivanreutkers comment) to add the part attribute so I could thus style it in CSS.
document.getElementById("the-id").shadowRoot.querySelector(".select-placeholder").setAttribute("part", "myPartName");
*Outside, meaning the stylesheet for my website/application and not the specific styles provided by Ionic that live inside the web component.
Try to add the following line in your app.scss file like this:
::ng-deep {
.select-text {
color: white;
...
}
}
I have a component and I want to place it centrally within a grid. The selector of the component is app-signup-component and the rule I have applied is
app-signup-component{
align-self:center;
width:100%;
}
The it seems the rule is not getting applied. I am unable to figure out why. What am I doing wrong?
The top level component is content-component. Its html is
<div id="content-div"> <!--this is a flex -->
<router-outlet></router-outlet>
</div>
Its css is
#content-div{
display:flex;
height:75vh;
}
app-signup-component{
align-self:center;
width:100%;
}
The app-signup-component component gets added dynamically. It is a form. When I run the code, I see in the debugger window that css rules for app-signup-component are not applied (see attached pic)
If I manually add the rule in the browser then the form moves to the center (see below pic)
I don't know why it worked but if I move the rule to styles.css which is the global css file applicable across all components then the code works. I suppose the issue might be that if a rule is added in component's local css then that component has to exist in the page when the page/component is loaded. In my case, content component has router-outlet and when content component some other component homepage at start up. When I click a button, signup component gets loaded. But because signup component was not present initially, the css rule doesn't gets applied to it when it is later loaded probably because the browser doesn't recalculate the css rules. I suppose my options are that I either redesign the architecture to keep css effects local or I add such rules in the global styles.css.
I am using PrimeNG for my project I used p-dropdown with appendTo body only for particular components files, and I changed the css in only one file as follow, for example
geneFinder.component.scss
.ui-dropdown-panel {
z-index: 999 !important;
}
and component file is
<p-dropdown [options]="geneoptions" formControlName="gene" appendTo="body"></p-dropdown>
But this css is affecting in all other files also. If I removed the !important it is not affecting in other pages and this is not working with particular component itself. How to fix this issue.?
you can try this
<p-dropdown [options]="geneoptions" formControlName="gene" appendTo="body" [style]={'z-index':'999 !important'}></p-dropdown>
You can also customize the z-index with the p-dropdown attribute baseZIndex. This way, you don't need to set it in css, and it affects only the dropdown where the attribute is set.
Angular is a single page application framework hence all the CSS would be combined and CSS styles will be created inside style tag of the single html page. If we are having a CSS class with name that is common to other component's elements it does affects it.
In case of component specific CSS, create a custom class name something like,
.mycomponent-ui-dropdown-panel {
z-index: 999 !important;
}
and add the class to the element of the component's html where we need this change to be applied. This will make sure that other elements of other components are not affected by the CSS style.
I fixed the issue by adding the panelStyleClass in my component,
<p-dropdown [options]="geneoptions" formControlName="gene" appendTo="body" panelStyleClass="overlay-zindex"></p-dropdown>
.overlay-zindex{
z-index: 999 !important;
}