I am trying to use DatePicker in my site. I have a main.css and it has a style as follows:
body {
margin: 0;
padding: 0;
line-height: 1.5;
font-size: 75%;
}
When I put the datepicker into the site the style of datepicker is changing.
Is there any way to prevent from changing it?
To fix it, find the specific style property(properties) in the body that affect your date picker and then specifically reset those properties in the datepicker css.
eg
/main.css/
body{
font-size: 2px;
}
for example ,the font-size will apply to everything you put on the page (including the datepicker) so to fix it go to datepicker css, and change font-size property for the specific element.
ie
/*datepicker css */
#foo{
font-size: 4px;
}
Cheers
If I understand you correctly, you can't prevent it as such, but you can override it and put it back as it was. You'll need to apply CSS to the date picker itself to override what the body styles are doing to it.
Does the date picker element have an ID, so you can apply CSS directly to it?
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 built a website with a WYSIWYG website builder using a template provided by the program. I have since abandoned the template and use CSS to style everything, but for some reason I cannot change the default text color of the whole site.
I thought that simply changing the body color in the CSS would change the default color:
body {
font-family: Lato;
font-size: 14px;
line-height: 1.42857143;
color: #ff9900;
background-color: #750204;
So I tried changing the color: #ff9900 to "b6b6b6" but that didn't work.
Then I literally replaced every instance of ff9900 in the CSS file to b6b6b6 and still the website shows the color ff9900. I don't get how that's possible.
Obviously I don't really know what I'm doing so be gentle. Thanks for any advice.
EDIT: here is what I see when I inspect the live page:
Why your code is not working
Although your code logically is correct, you must take into account how CSS works, especially in how it sets styles. If you have a certain element with that has color: blaa;, then it will always set that after what it inherits. So when you use body {blaa...}, you will only be able to see the results if nothing else later on overrides that. Here is a diagram to show you this:
For an element with the ID of "ID" in something like: body > nav > #ID then the styles will be applied like this:
BODY STYLES:
NAV STYLES
#ID STYLES or .CLASS STYLES
* STYLES
In this, if you specify a rule like: body { color:red }, and then #id { color:blue } then the color will be blue as it is the latest out of the 2 in the list above.
Why dooj sahu's answer has been down voted
This is because !important is not the best to use when there are other ways to go without it.
The way to do it
The best way to solve your problem is by using;
* {
color: #b6b6b6
}
* {
color: #b6b6b6
}
If you are begineer, i add a precision:
"*" target entire website, you can change background-color for example and whatever property you want.
Simply use !important:
body {
font-family: Lato;
font-size: 14px;
line-height: 1.42857143;
color: #b6b6b6 !important;
background-color: #750204;
}
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.
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
Here's a live demo of the issue on JS Fiddle. I have some jquery UI radio buttons, and by setting the font-family on the body element, suddenly spaces appear between the buttonset, ruining the appearance and connectivity of the buttons. They look like this:
Update: the bug is now happening in all browsers, though slightly different in each browser. In all cases the font-family attribute is the problem.
I included some minimum CSS/HTML from my site that causes the issue, the Themeroller CSS for my site. You can mess with the fiddle and you'll see the gaps disappear when the font-family tag is removed from the body tag. Note it doesn't have to be a body tag, it happens if you make it a div or anything else that applies to the radio buttons.
This one bit of CSS is enough to break it:
body{
font-family: Verdana, Helvetica, Arial, sans-serif;
}
Is there any way I can specify the font family for the parent elements without the jquery UI buttons breaking? Interestingly this font-family isn't being used, as the Jquery UI theme's CSS sets the radio button's font as well.
I couldn't tell you why it does it, but if you are happy just to add CSS code that fixes it then use this:
#radio input, #radio label {
float: left;
margin-right: 0px;
}
Edit
In response to your comment below - try adding !important to margin-right; it looks like it is being over-ridden.
#radio input, #radio label {
float: left;
margin-right: 0px !important;
}
JS Fiddle - http://jsfiddle.net/kwpGn/7/