I'm trying to change the padding on mat-cell and I've noticed some weird behavior.
If I write the css inside the component's css file everything works just fine, but if I write it in style.css (I want to apply it to the whole app) it gets overwritten by the default.
I guess this has to do with the order in which the css files are applied. If that is the case, how can I see this order and is there a way to change it or bring style.css on top?
I would suggest to create a separate .scss file reserved for styling globaly Angular Material elements, and importing it in the main styles.scss file.
Answering your question - propably you're not 'specific' enough. First of all it would be nice to add an additional custom class to your Material element so the custom styles will be applied only when this class is present. Example on styling
.mat-table.my-custom-class {
width: 100%;
.mat-cell {
font-size: 20px;
padding: 20px;
}
}
You might nest the elements event more for higher css specificity
That works for me:
.mat-cell {
padding: 12px!important;
}
Check for the parent scope of default style which is overriding css added in style.css using developer tool. Use the same parental scope along with !important.
Related
Vaadin flow theming and styles confuse me. Is there a way to disable it and apply natural css. I know how to reference a css file inside vaadin, and use setClassName but I would prefer to use ordinary css style for components.
Thank you
You can override the default lumo styling by providing yours. For instance, to remove the background color from a ComboBox, I can target the input as follows in a CSS file named vaadin-combo-box.css:
[part="input-field"] {
background-color: var(--lumo-base-color);
max-width: fit-content;
}
To set the colors for a disabled button, you can target it as follows:
filename: vaadin-button.css
code:
:host([theme~='primary'][disabled]) {
background-color: red;
}
And you get the following:
To change the primary color or any other global styling, explore your styles.css file.
For a better understanding, take a look at this video https://vaadin.com/learn/training/v14-theming
Like with all other styling you need to check the states / attributes of the component while the specific state is active and check the DOM - only caveat would be that you need to add those style in the specific files like vaadin-button.css to be applied inside the shadow DOM.
I am currently working on my first website in react. In my main.module.css I have
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
Just typical css styling reset. But React returns the error:
Syntax error: Selector "*" is not pure (pure selectors must contain at least one local class or id)
Do you have any solution for that? I want to keep this styling reset instead of adding those three lines to every element i have.
You should not have styling reset in module.css file.
Move this css reset to normal css file like index.css file.
Styling file with .module.css extensions are used to define the styling you can say local to a components. It means that if you import a module.css file in two different components, both components will have same styles with different class names. This one prevents overriding of styles.
That would go into global styles, which can be done by simply adding:
require('./name-of-your-global-style.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;
}
I am using Active Admin, is there a way to override CSS used by the active admin theme?
For eg:- I have to change css of submit button which is disabled to cursor: wait; and make it unclickable.
What's the best way to do this?
just make a new file
app/assets/stylesheets/active_admin.css.scss
and put your scss code there.
(Or just active_admin.css with css code)
You can override any CSS property by overriding the CSS class or IDs in you own stylesheet with !important attribute if you do not have any access to the original stylesheet
For example, use
.submit-button {
color: white !important;
}
to change the color of the submit button text.
It is easy to change the styles in Rails 4. Go to
app/assets/stylesheets/active_admin.css.scss
OR (depending upon where you have kept the file)
vendor/assets/stylesheets/active_admin.css.scss
and add styles in there.
I put my form classes in a container class to create a more specific reference. Like..
.form-container {
font-family: 'open-sans';
width: 420px;
.text-field-class {
input{border:none; border-bottom: 1px;}
}
}
this is working so far... for the most part. Better than important. Though maybe using an ID would be the more appropriate way.
I have an external CSS file which is being imported into one of my pages. This external CSS assigns styles to HTML tags. For example,
table {
width: 100%;
font-size: 3em;
// long list of CSS styles
}
tr {
width: 100%;
font-size: 3em;
// long list of CSS styles
}
What is the best way to override these external CSS styles for a single table? For example, if I have a table and I don't want these external style on my table, how would I do that?
Thanks.
Edit - As a clarification, the "long list of CSS styles" has hundreds of styles. Most of the answers so far suggest that I override the provided CSS. Do I need to override all of the hundreds of styles?
Load your own CSS after the other CSS you want to override. The last read rules (if the same level of specificity) will win out. You only need to override the specific rules you need/want to -- not all of them.
you could use inline styles on your table,
<table style='width:90%'>
<tr style='font-size: 4.4em'>
or set up separate classes for the table in the external file, or create another .css file containing these styles
.otherTable{
width: 90%;
font-size: 2.3em;
// long list of CSS styles
}
and in your html,
<table class='otherTable'>
You should rewrite them to your needs right after the external css file.
Load them in this order:
http://www.externalserver.com/styles.css
css/general.css
And then apply your styles which will suit your website theme.
In addition to what j08691 stated, if you have issues with your CSS taking effect, add the phrase "!important" before the semicolon to ensure it overrides the other settings.
http://webdesign.about.com/od/css/f/blcssfaqimportn.htm
Be lazy and just scribble some javascript on that particular page.
Here is the SO Q/A on that:
https://stackoverflow.com/a/196038/1617149
Or you can do it in jQuery/Prototype before the page is rendered, e.g. on DOM load.