I need some help on CSS since my CSS is very rusty. So I am working on a project which has a couple of global CSS files and they have properties defined for various tags (ex-> .btn). I am using an external library called Form.io in my project but those global CSS files are messing up the CSS files from the library Form.io since some of the classes are already defined in the global CSS file. Is there a way to override those specific classes so that the Form.io library uses its own CSS-defined properties and not the global CSS properties?
I tried using the :not() in the global CSS file for certain classes that I think are affecting the Form.io library but doing so affects other pages and their style so that is something I don't want. Any help or suggestions would be great.
Add !important in the end of your CSS rule to ovverride global styles.
Example:
.btn {
background-color: red !important;
}
Hope this helped.
Related
I'm using react-multiselect-checkboxes in my project.
The problem is with changing it's styling, the css classes in inspect mode have these values: .css-1r4vtzz and .css-48ayfv.
If I'm adding them in css file and override a property with !important it seems to work.
But If I add another class to that element, for example in my React app:
className="new-css-rule css-1r4vtzz" - it doesn't take into acoount the new class, even if the styling is with !important. It doesn't even show the class's name in inspect mode.
Is there a way to add that new css class and use its styling?
According to the documentation
Like props, styles supported by react-select are passed directly into
the underlying Select component. Some of the defaults have been
tweaked for the multiselect, but you can override them like normal
There are several methods of overriding the styling. They can be found here.
We have to include CSS file for forge-viewer, but it breaks our own site styles. For example:
- forge CSS contains Alertify styles (they overrides our own custom Alertify styles)
- forge CSS has style for "#close" - this breaks our close buttons
- etc
That can you suggest to solve this critical problem?
CSS collisions can easily be solved by scoping your own css or the viewer one. It is hard to tell you exactly how to fix it as there are many different ways to handle it and without knowing exactly how your css/html is structured I can't tell you the best approach.
If you are using LESS or SASS, it is pretty easy: Easily scope CSS using LESS or SASS. You can scope the viewer styles by adding the viewer div id or class to its styles.
Another approach is to adapt your own css, for example your #close button must be a direct child of a specific class:
// instead of using:
#close { ...}
// add a parent class:
button#close.my-app { ... }
Hope that helps
I am currently developing a user interface using Angular 4, Angular Materials and PrimeNG components.
The latest component I am battling with is the MultiSelect Component from PrimeNG:
https://www.primefaces.org/primeng/#/multiselect
I am simply just trying to make the component's width fit 100% of the parent component.
Is there a specific process I need to follow to edit CSS classes for this component? The documentation says to use "Style" for inline - does this mean:
<p-multiSelect [options]="cars" [(ngModel)]="selectedCars" [defaultLabel]="defaultLabel" style="width: 100%;"></p-multiSelect>
Because this did not work.
It also says to use "styleClass" as a property to add a styling CSS class. How do you use this?
Lastly, they provide a list of the CSS classes the PrimeNG component uses on the website (e.g. ui-multiselect). When I attempt to modify 'ui-multiselect' by declaring it within the Angular components CSS, it still doesn't work.
Any ideas? What am I doing wrong?
For inline PrimeNG styling, use something like this:
[style]="{'width': '100%'}"
To use styleClass simply add:
styleClass="example-css-class"
This way, for example, you can style multi select input field with many different style classes, eg. Bootstrap's form-control.
When you operate with PrimeNG ui's, be sure to put them into components .css. If you use global styles.css, you'll have to override the PrimeNG files in .angular-cli.json. You can do it by editing styles array like this:
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/primeng/resources/themes/omega/theme.css",
"styles.css"
When the styles.css are put after the primeng resources, it is loaded after the primeng's, which will override the styles.
I am currently merging functionality of 2-3 open-source projects and am dealing with a couple of large CSS files. To make a long story short, there are a couple of textboxes that are not being styled correctly. Namely, they seem to inherit styles from both libraries.
Hence, I am wondering if there is a Jade or CSS way of disabling all styles on those boxes and then applying only the ones indicated in its class property. That is, somehow I need to make sure that the only thing that are applied are those that are specified within the class property.
Check out this link on 'unset', 'initial', and 'inherit'.
Likewise, check this out as well. There is always the option of using '!important' in your own CSS file to override existing styles.
Hope that helps!
the all property offers the ability to force a reset off all properties, but browser support is limited. Because of the nature of CSS, the element will always inherit any properties that are not overridden. I'm assuming if you are using jade you are also using a css pre-processor, so you can mange some of this by name-spacing your libraries. For example
//sass
.foo {
#import 'bar';
}
//csss
.foo .class-from-bar {...}
.foo .class-from-bar-2 {...}
Hi I'm experimenting with Polymer and trying to style some polymer paper modules... In Polymer 1.0 they added this new properties in the CSS internal to shadow DOM's module... I am trying to change a color that is dependent on one of this properties --paper-input-container-focus-color for the paper-input-container module but I could not find any clear documentation or guide on how to actually access that property from...
I can style it overriding the CSS property via /deep/ or ::shadow but from my understanding this new method is supposed to avoid using those 2...
Can anyone point me in the right direction???
CLARIFICATION:
I am interested in the mixins Google introduced in polymer... that make use of #apply(--foo-bar)
As usual I answer my own question... But I really hope it can help others not wasting days like I do..
to take advantage of this new mixins to customize your shadow-element externally you need to add a style tag with the attribute is="custom-style" in your page before placing the custom-tag.
<style is="custom-style">
my-custom-module{
--my-custom-property-color: yellow;
}
</style>
<my-custom-module></my-custom-module>