I have a small problem and I'm not sure there is a real way to do what I want easily.
I have multiple stylesheets available:
a Bootstrap stylesheet is loaded first
Multiple modules are loaded
In one module, there is a rule like this:
.container .container {
padding-left: 0px;
padding-right: 0px;
width: auto;
}
This effectively prevent me from using stacked containers in my layout. I'd like to disable this rule.
I can technically override it before or after it is declared but I don't want to reset the styles... Let say I just want this rule to cease to "work".
I tried to override it with:
.container .container {
padding-left: inherit !important;
padding-right: inherit !important;
width: inherit !important;
}
But that doesn't work. What I'd like to achieve is effectively disable a style in the stylesheet chain since the bootstrap has multiple styles with media queries, it could be a bit complicated to reapply the bootstrap styles for the container after the css stylesheet that breaks my styles is loaded.
As far as I know there is no way to do that other than reapplying the styles.
Related
I have a form with mat-errors that I'm trying to space out. I know I can simply space out the form fields themselves, but I've been trying to add margin/padding/border to mat-error elements, and they all get applied, but they don't move.
As far as the CSS goes, I've tried most things I can think of to force it to move. The styles are applied but nothing is actually changing.
mat-error{
display: block !important;
position: relative !important;
margin-bottom: 40px !important;
padding-bottom: 40px !important;
z-index: 999;
}
Why is this happening?
Change your css to class: .mat-error instead of mat-error.
In order to change styles in angular materials you should define a global stylesheet declared in the styles array of your angular.json configuration file. and custom all mat styles within.
In Styles.css:
.mat-error {
color: aqua;
}
The result will be:
Please read Customizing Angular Material component styles article for better explanation.
I am looking to improve the style of a Wordpress site.
I have a div with the group-input class which has this style:
.group-input {
display: inline-block;
margin-bottom: 0px;
float: right;
padding-left: 10px;
text-align: right;
}
I would like that below 572 px of screen we switch to float : left so I wrote this below the previous code, in my theme's CSS file, like this:
.group-input {
display: inline-block;
margin-bottom: 0px;
float: right;
padding-left: 10px;
text-align: right;
}
#media (max-width: 572px) {
.group-input {
float: left !important;
}
}
On the other hand it does not work, the new style does not apply to my div.
suddenly I don't know how to do it. Do you have an idea, a lead to advise me?
I want some explanations, something simple for you is not necessarily obvious to me suddenly I need to understand. Thanks for your time and help.
In general, that should overwrite the css rule you are trying to do, but it's probably another css rule that more specifically targets that element. A few reasons it may not be overwriting is because:
another css rule is more specific than yours
it's in a breakpoint more specific than yours
it uses !important
A combo of all of those will require you to be even more specific in targeting the element.
If you find you are unable to overwrite a rule, try and be more specific in your targeting of the element by targeting it's grandparent/parent and working down the html tree. If you notice that that isn't working either, then try using !important.
Check the html structure around it try that. Sometimes even body .group-input might be specific enough, but the closer you specify to the element, the better off you will be.
Ok so I have this scenario that I don't understand in the default bootstrap css style sheet the label css is defined like this
label {
display: block;
margin-bottom: 5px;
}
Now I override this css in my own stylesheet which is rendered after the bootstrap like this
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
color: #333;
}
Can someone explain me why is browser is still rendering as a display:block?? even if the styles are well defined are good rendered? here's the screen shoot the computed styles
Here's the proof of the override of the style
Update, this is how is rendered the stylesheets
You need to import your CSS code after Bootstrap that way it will get overwritten.
As pointed out, you can just use "!important" however, this is usually bad practice.
I am building a mobile site using jquery.mobile-1.0b3.min.css. If I download the css file, I lose some of the effects and icons from the theme I'm using. But I need to override some styling in that file even though it's hosted at jquerymobile.com.
The style I need to override is ui-select. The width attribute of this style is width: 60%, but I need to remove that style altogether while leaving the rest intact.
.ui-select {
width: 60%;
display: inline-block;
}
Is there a way to remove width: 60%; without effecting display: inline-block;?
You can add your own stylesheet that overrides any previous styles. (Just make sure your custom stylesheet loads after the jQuery stylesheet.)
I am starting a new project, so i thought to start using Reset.css in my projects. i got the concept of using Reset.css, but one thing is bothering me is that does if affects my other style applied on the same element.. like in reset.css div have 0 margin and 0 padding... and if i apply margin to some of the divs in my stylesheet, wont it get disturbed?
Please clear my this doubt
Not if the style applied to your other divs is more SPECIFIC.
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
In general any style applied using a class, or an id in the selector is going to take precedence over one which doesn't. But there are many other rules in this area you should become aware of.
i.e.
div.myStyle {...}
will always overrule
div {...}
You have to include reset.css first and then include your own stylesheet file. and be sure that your styles wont be overwritten by reset.php.
What you neeed to do is load reset.css as a first style sheet.
Anything else loaded after it will be overriding reset.css
e.g if you specify in reset css: p { margin: 0px; padding: 0px}
and than load style.css with style: p {margin: 2px; padding: 2px}
The style load as last one will be used.
I personaly use technic with
* { margin: 0px; padding: 0px; border: 0px; outline: none; list-style: none;}
Put it at the top of css file and job done:) No need for extra .css fil.