I have an Angular 2 component with an accordion, which I added using ng-bootstrap. Everything works fine functionally, however the styles that I try to load using the .card, .card-header, .card-block classes that the compiled accordion elements have, those styles do not get applied to the elements at all.
These classes are set by ng-bootstrap directly, when transforming the accordion into div's.
I apply my own css via a styles.scss file that I link to the components TypeScript file. When everything is rendered, my styles appear in the <style></style> tags in the header of the html output.
It looks like this.
<style>
[_nghost-xfh-23] .card[_ngcontent-xfh-23] {
border: none; }
[_nghost-xfh-23] .card-header[_ngcontent-xfh-23] {
margin-top: 0.75em !important;
border: 1px solid rgba(0, 0, 0, 0.125); }
[_nghost-xfh-23] .card-block[_ngcontent-xfh-23] {
text-align: left; }
</style>
The styles.scss looks like this:
:host .card {
border: none;
}
:host .card-header {
margin-top: 0.75em !important;
border: 1px solid rgba(0, 0, 0, 0.125);
}
:host .card-block {
text-align: left;
}
My guess is that Angular 2 is trying to apply the styles (during compilation), but creates the div's with the said classes afterwards, making it impossible to apply the styles to the elements.
Im restrained to edit the bootstrap.css directly or create an other global css file. I'm hoping there is a way to reapply the css styles after the component is loaded or some other means to style ng-bootstrap accordions.
Hope my problem makes sense,
regards
Sy
As #ChristopherMoore said in his comment, it was a problem due to Shadow DOM. Adding /deep/ fixed it. Here the updated functional code.
/deep/ .card {
border: none;
}
/deep/ .card-header {
margin-top: 0.75em !important;
border: 1px solid rgba(0, 0, 0, 0.125);
}
/deep/ .card-block {
text-align: left
Related
I have created a custom angular component e.g. my-component and in its css file i have the following:
:host {
display: inline-block;
width: 55px;
}
Then in some components template i want to use my-component and add some style to it like so:
<my-component class="my-class"></my-component>
CSS file:
.my-class {
border-radius: 4px; // NOT WORKING
box-shadow: 0 5px 9px 0 rgba(192, 195, 197, 1); // WORKING
position: relative; // WORKING
top: 30px; // WORKING
}
I cant figure it out why the border-radius is not applied!
I believe you need to add border first. Like
border: 2px solid black;
And then add border radius.
I have a login page and I cannot color its background. I was able to color the app-login (name of my login component) element by adding
:host {
display: block;
background-color: blue
}
to my scss file. It was suggested in here
But only the background of component element is colored. The other parts of the page remains white. I can color the html element on browser
while inspecting. I added background-color:blue; to html{} tag.
I did the same thing on my .scss file but it didnt work. I also tried with !important but it still is not working.
My login.component.scss file:
:host {
display: block;
background-color: blue;
}
html{
background-color: blue !important; // not working
}
.card-container.card {
max-width: 400px;
padding: 50px 60px;
}
.card {
background-color: #F7F7F7;
padding: 20px 25px 30px;
margin: 0 auto 25px;
margin-top: 220px;
}
According to documentation (https://angular.io/guide/component-styles)
"The styles specified in #Component metadata apply only within the
template of that component."
This means everything you put in your login.component.scss affects only this particular component.
If you want to use
html{
background-color: blue !important;
}
You should put it in some global styles file (by default it is src/styles.scss).
I am trying to edit the style of a popover. In this case I want to edit the width of the display. However, I have a global popover style sheet that applies to all popovers in the application.
/* ========================================================================
Component: popovers
========================================================================== */
.popover {
border-radius: 0;
border: none;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
.arrow {
margin-left: -7px !important;
}
.popover-header {
padding: 1rem 0.75rem 0.5rem;
display: block;
background-color: $secondary;
border-bottom: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.popover-body {
padding: 0.5rem 1rem;
color: $body-color;
}
.popover-close {
position: absolute;
top: -2px;
right: 0;
padding: 0 0.5rem;
color: $gray-lighter;
font-size: 2rem;
font-weight: 400;
line-height: 1;
text-shadow: 0 1px 0 #fff;
&:hover {
cursor: pointer;
color: $body-color;
}
}
I would like to know how in my local css file I can overwrite/add to these inherited styles.
Local Style Sheet:
.team-activity-container {
.icon {
background-image:
background-repeat: no-repeat;
display: inline-block
}
.icon .icon-team {
background-position: -5px -5px;
width: 25px;
height: 25px
}
}
.popover {
background-color: aqua !important;
width: 500px;
}
Edit: The local stylesheet is in the container that displays the popover, and the classes in the html are all related to the contents that fill the popover. While the popover and it's stylesheets are at the global level. how can I edit the popover at the local level without having to touch the global style sheet.
Also, The popover is from ng-bootstrap and I believe the problem is I can't overwrite the default width that bootstrap sets
I don't know all the context you are in, but there are 3 main ways to overwrite existing CSS rules:
add a new stylesheet with the new rules after the existing ones;
if you have control over the new popover HTML, adding a class (for instance version2 so you can edit your variant in a meaningful way as .popover.version2 inheriting what is already sets and changing just what you need);
add "!important" to the rules you add and are intended to overwrite the others, but notice that if the existing rules have already that, it's not going to work.
Depends on the context there could be other solutions like leverage on HTML tags or HTML tags properties if your new popover has some difference with the previous for examples.
I hope this helps.
EDIT: I saw you have edited your question adding stuff.
Looking at the global CSS, if your popover is in a particular container just bind the new rules to the container like this:
.team-activity-container .popover {...rules};
I'm using foundation sites in a WordPress theme, I am trying to override the style for the accordion component:
In particular I want all the items to have a border-radius of 10px.
There seems to be a couple of mixins that apply specifically to the first and last elements on the list which change the border radius:
/// Adds styles for the accordion item. Apply this to the list item within an accordion ul.
#mixin accordion-item {
&:first-child > :first-child {
border-radius: $global-radius $global-radius 0 0;
}
&:last-child > :last-child {
border-radius: 0 0 $global-radius $global-radius;
}
}
The problem I seem to be having is I am unable to override the borders in this mixin, I have tried re-declaring the mixin and changing the 0's to $global-radius.
I have changed the global Radius to 10px styles defined:
.di-accordian-title {
background-color: $blue;
color: $white !important;
padding: 5px;
border-radius: 10px;
margin-top: 5px;
width: 100%;
clear: both;
float: left;
font-size: 14px;
}
.di-accordian-title:hover, .di-accordian-title:focus {
background-color: $light-blue;
color: $white !important;
padding: 5px;
border-radius: 10px;
margin-top: 5px;
width: 100%;
clear: both;
float: left;
font-size: 14px;
}
I just can't seem to override the first and last items border-radius.
This is my first time using sass in a project, first time using sass at all really.
What is the correct way to override the defaults set up in the accordion mixin?
You shouldn't need to override the mixin, the specificity of your own styles or settings should override it.
There are two easy ways of doing this:
Via "settings"
In your _settings.scss file (which should be referenced from app.scss) there is a setting for $global-radius which by default is set to 0. Simply set this to 10px or 0.6rem or whatever you fancy and the global radius will be changed to that amount.
N.B. This is the radius for all foundation elements, not just the accordion.
Via specificity
Alternatively if you want to keep a global radius of 0 (or whatever) and just want the accordion to have a 10px radius:
.my-accordion.accordion {
.accordion-item {
&:first-child > :first-child {
border-radius: 10px 10px 0 0;
}
&:last-child > :last-child {
border-radius: 0 0 10px 10px;
}
}
}
This would go in one of your projects scss files, loaded after the Foundation SCSS, which are also #imported from the app.scss file
Edit: Where .my-accordion is the class you have for that specific accordion, though it also works for all accordions if you just use the .accordion-item part of the scss above.
I'm using polymer and I'm thinking this is a but but I'm not entirely sure.
In my main document I have this:
<style is="custom-style">
:root {
--child-element-bg: #000;
--child-element-mixin: {
border: 10px solid #f30;
};
}
</style>
<parent-element>
<child-element></child-element>
</parent-element>
The inside my child element I have this style block
<style>
:host {
background-color: var(--child-element-bg, --some-other-default);
#apply(--child-element-mixin);
}
</style>
Everything works great. However inside my parent-element I have:
<style>
:host {
--child-element-bg: #f30;
--child-element-mixin: {
border: 5px solid #000;
};
}
</style>
My child-element gets the 5px solid #000, But Not the #f30 background-color.
am I doing something wrong? Is this a known bug?
This is not a bug. This is how Polymer has implemented their css variables.