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.
Related
I got a problem with Angular Material and customizing the formfield styles.
I have got override the styles of the form-field-appearance-outline in the custom-theme.scss to add more border-radius in 4 corners and work ok everywhere except in dialogs in which only work in the right side (-end).
This is an example in the app
And this is in a Dialog
As you can see only happen in the dialogs.
this is what I have in the custom-theme.scss
////////////////////////// FORM FIELDS //////////////////////////
.mat-form-field-appearance-outline {
.mat-form-field-infix {
padding: 0.4rem 0 0.7rem 0;
span {
top: -1.2em;
}
}
.mat-form-field-outline {
background-color: rgba(187, 187, 187, 0.2) !important;
border-radius: 15px !important;
border: none !important;
.mat-form-field-outline-start {
border-radius: 15px 0 0 15px !important;
}
.mat-form-field-outline-end {
border-radius: 0 15px 15px 0 !important;
}
}
}
Looking for a class a miss in the elements tab in devtools i that the element appears to be good overridden:
LEFT SIDE
RIGHT SIDE
Already try with ViewEncapsulation and styles in components but nothing.
any ideas how I can fix this?
I used my angular 6 project for the ngx-image-cropper that one is working fine, I try to change that cropper style but its not a change , any one know how to do that correctly
I used this style
.cropper .move {
width: 100%;
cursor: move;
border: 2px solid red;
}
Try to add style in parent component (index.html) OR global CSS (styles.css) with the important attribute.
index.html
.cropper .move
{
width: 100%;
cursor: move;
border: 2px solid red !important;
}
Am using Angular 6 App. I want to change the style of ng-multiselect-dropdown. If i override the style using inline,external and internal, it does not affect anything. Only if i change the style in node modules the change effects in UI. But it is not the correct way.How should i achieve this?
style.css
.multiselect-dropdown .dropdown-btn .dropdown-down {
display: inline-block;
top: 10px;
width: 0;
height: 0;
border-top: 5px solid #adadad;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
}
you can use !important to you custom ccs inside style.css file
like:
display: inline-block !important;
second solution you can make component ViewEncapsulation.None
I thing this may work..
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.