I am using PrimeNG Components like Checkboxes, Radiobuttons etc. in my application.
I want to apply CSS on these components, but only, when they are focused by pressing Tab and want to use the pseudo class :focus-visible.
I was able to apply CSS with something like
body .ui-chkbox .ui-chkbox-box.ui-state-active.ui-state-focus {
border-color: red
}
But then style applies also, when focused by mouse click as well.
What would be the CSS syntax with :focus-visible pseudo class to style PrimeNG Components?
Related
I recently started learning Angular by doing a pet project.
In on of my components I use Angular's feature of conditionally applying classes to components based on the result of the predicate. Now the problem is that my click event fires and the .selected class is applied to the angular component, but when I try to change border color nothing happens. Strange thing is that I can apply some styles to that component by changing the content of the class.
enter image description here
enter image description here
Try to add display: block to the .selected class or add :host { display: block } in the .scss-file of your app-product-item.
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 some patterns that appear which, when that happens, I would like to apply the styles of a bootstrap class to my selected element. The reason is that I don't directly have access to the elements in question as they are pre-generated and fed into my jinja template.
Example:
Everytime I have a button in a form that I want my custom css to extend to mimic btn and btn-outline-primary classes and apply their styles to my selected button. Say then I modify the styles I extended so this button also has small caps.
I've tried this, to no avail:
form button{
#extend .btn
#extend .btn-outline-primary
font-variant: small-caps;
}
How do I correctly reference this outside style sheet and extend its classes? Any solution for this that works out the box without add-ons is preferred.