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.
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.
Ok, this is the styling I want to be used
.suggestion-taxonomies-product-visibility span {
display: inline-block;
float: left;
padding-left: 10px;
}
The usual of mentioning the element here doesn't seem to work, any ideas? I can specify more if need be. I am new and not great at specifying my problem!
Thanks.
use important like
.suggestion-taxonomies-product-visibility span {
display: inline-block !important;
float: left !important;
padding-left: 10px !important;
}
Place your style after the theme stylesheet. It will override the theme styling. Better still, you can replace the suggestion-taxonomies-product-visibility class span styling in the styles.css file. If you opt for the latter, changes will be lost when updating the theme. You can avoid this by building a child theme to the theme you are currently using.
Use !important tag in each, ex:
.someclass {
width: 10px !important;
}
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.
I can't seem to change the font-size for the Ionic input. I've tried
input {
font-size: 30px;
}
but that doesn't work. However,
input {
font-family: Times;
}
works, so I don't know what exactly is the problem. I can't even change the height of the input as
input {
height:100px;
}
does not work.
However, when I take out the line in my HTML referencing the Ionic CSS, (lib\ionic\css\ionic.css), my CSS works. I think my CSS should be overriding the Ionic CSS as my CSS comes after it, so what's happening, and how do I fix it?
EDIT:
Even if I put !important, it doesn't work. Interestingly enough,
input {
height:100px; !important
font-family: Times;
}
makes it so that the font doesn't change, while
input {
font-family: Times;
height:100px; !important
}
does change the font.
EDIT2: The problem was with selector specificity:
textarea, input[type="text"]... {
display: block;
padding-top: 2px;
padding-left: 0;
height: 34px;
color: #111;
vertical-align: middle;
font-size: 14px;
line-height: 16px;
}
was overriding it, so I just changed my CSS to
input[type="text"] {
font-size:30px;
}
and it worked!
It is very likely that the specificity stated in the framework is greater than what you are providing in your CSS.
Using dev tools to track down the specific style by inspecting the element should show you how the framework defined its selector.
As some have mentioned, using !importantcould solve this, but it is not a recommended solution as it cheat its way to the max specificity and can't be overwritten later on, except by being more specific with a selector and including the important statement.
You need to put !important before semicolon.
Can I have hand please? I am struggling to over-ride the CSS on the Wordpress Custom Fields Search plugin, which seems to use the same style for search boxes that appear in the widget and the page. If you look at http://www.landedhouses.co.uk/parties/, the white text is visible by the search boxes in the widget but not so visible on the page. Any ideas how to fix this!? Unfortunately adding this to the page's php didn't achieve anything:
<h2>By size and price</h2>
<p style="color:000;"><?php if(function_exists('wp_custom_fields_search'))
wp_custom_fields_search(); ?></p>
Many thanks!
This is the style rule that is causing you problems.
/* searchforms.css line 15 */
.searchform-label {
display: block;
float: left;
width: 200px;
overflow: hidden;
font-size: 1.1em;
font-family: sans-serif;
font-weight: bold;
padding-top: 4px;
color: white;
}
You can do a few things using css. You can make an overwriting rule in the style sheet:
.searchform-label {
color: black;
}
if that doesn't work, you can make a more specific rule:
label.searchform-label {
color: black;
}
or you can in the worst case scenario make an !important rule.
.searchform-label {
color: black !important;
}
As an extension of the above answer (i still cannot comment :( )
Generally speaking, a more specific rule will override the property if the original is not using !important,
so as the original targets .searchform-label, you just need to target something more specific, such as label.searchform-label, and if that doesnt work, include a direct parent element and a > e.g. if the label is wrapped in a P, use p>label.searchform-label
there should rarely be a need for !important, although they should make a !notimportant, for easy override :D