I would like to apply a css style to a element after it's created. The element is created by a plugin, so I can't access the event in which it is created.
This element has the .appointments-address-field class. I have tried to add a simple style:
.appointments-address-field {
background: #fff;
}
... with no success. Then I tried to attach a delegated load event in jQuery:
$(document).on('load', '.appointments-address-field'), function() {
$('.appointments-address-field').css('background', '#fff');
});
... with no success either.
How can I apply a style to that element?
Edit: Sorry, I misspelled my jQuery code. Many of you have suggested to use .css instead of .style, but I did use that.
You were correct in the first place to use CSS and not code, but your css selector must be at least as specific as any existing background style applied to that element. I am of course assuming your styling is already included after the plugin's styling.
Use a tool like Chrome's F12 DOM inspector to view where the styling for an element is coming from and whether that is more specific.
e.g. it may need to be something like:
.some-parent-wrapper .some-appointment .some-group .appointments-address-field {
background: #fff;
}
If you were able to provide a link to the actual site, it would be easy to suggest the correct selector.
Update:
Do not resort to the easy fallback of !important unless the current selector also uses it: http://james.padolsey.com/usability/dont-use-important/
Your first way should work, provided:
You include it in a stylesheet after the stylesheet related to the plugin (if any).
The plugin's stylesheet doesn't use !important; if it does, you can add that to your style.
The plugin doesn't style the background of the element directly; if it does, you can use !important in your stylesheet to win.
The plugin's rule isn't more specific than yours; if it is, make your rule more specific. In any modern browser, you can right-click the element, open the dev tools, and see the rules applied to it.
Fighting style wars with !important isn't ideal. If the plugin is making this difficult in that way, you may be better off finding out what event (if any) is fired when the plugin adds the element, and then running your
$('.appointments-address-field').css('background', '#fff');
...code in response to that. (load is not fired when elements are added to the DOM, which is why that didn't work.) Also note that the function is css, not style.
Please use .css of jQuery
$(document).ready(function() {
$('.appointments-address-field').css({'background':'#fff','border':"#000"});
});
after loading plugin, this line added in your code if u have ready event already included please below code only
$('.appointments-address-field').css({'background':'#fff','border':"#000"});
try
.appointments-address-field {
background: #fff !important;
}
problems can be another style directive put different background
Related
I need to remove the "disabled" property from a button. I have been trying to achieve this via jQuery and I know what exactly to do ($(.button).removAttr("disabled")), the only problem is that this button is deep inside the hierarchy and I am not able to grab it through my code. Inside my scss file, I am able to work with this element by doing something like this:
.parent ::ng-deep .child {
margin-left: 1px;
}
Though when I try $(.parent ::ng-deep .child).removAttr("disabled") in my jQuery code I get a syntax error since I believe ::ng-deep is not allowed in jQuery. Is there a way I can mirror the functionality of ::ng-deep in my jQuery code?
Edit: I am using Alfresco Development Framework(ADF). This is the adf-viewer component to be precise. the html code looks something like this:
I am not able to grab the highlighted div (adf-viewer-container) which is a child of adf-viewer element. I started off from a parent at a much higher level and could trace my way upto adf-viewer. The button I am targeting is deep inside the highlighted div.
In the scss file this works:
.inner-layout .inner-layout__content adf-viewer ::ng-deep .adf-viewer-container {
// do something
}
P.S. Since this button is a part of a third-party component I do not have the ability to manipulate the HTML file. I have been using the developer tools to look at hierarchy. I also read about shadow DOM, but parent.shadowRoot is null. The regular jQuery operator '>' didn't work either.
Any help is highly appreciated
I have a site that's maintained by a 3rd party. They will allow us to load our custom js file in the header so that we can manipulate the DOM as each page loads. I know how to swap out classes, etc. but I was curious if I can sniff for a HEX value and swap it out for another instead of adding classes here and there to do the same thing.
I don't want to this to one element (e.g. getElementByID or tag) I want it to swap out ALL instances of this variable. So if the CSS is:
fred { color: #e3e3e3; } (and other classes are also using #e3e3e3)
I want to be able to search for all instances of #e3e3e3 and change them to #d9d9d9. or something like that.
Thanks
If you are explicitly trying to modify the CSS instead of just adding either inline styles to an element or by adding your own style tag to the document with more specific CSS, you could technically do what you are asking, as answered by this other SO question.
I would recommend instead of that you either inline your CSS if you are targeting only a few DOM elements, or create a more specific CSS rule targeting the classes you want to change.
I am trying to figure out how I seem to be losing my CSS precedence on an AJAX loaded page. I am loading my custom CSS last on the main page, so that should allow my CSS to override any bootstrap CSS. After loading new content via AJAX, bootstrap is overwriting my custom CSS. I can see via browser debug that bootstrap has overwritten the property.
Custom CSS Styling:
.mytableclass td {
font-size: small;
text-align: center;
vertical-align: middle;}
As bootstrap isn't setting the font-size or text-align, it applies fine, but my vertical-align is overridden. I am not loading the CSS files again in the AJAX loaded page. There has to be some sort of reason, but after several hours I can't figure it out.
As you didn't post the Bootstrap CSS class definition, I'm going to guess it is a CSS selector priority issue.
Is the Bootstrap CSS selector more specific than yours? Then it gets priority over any CSS loaded later. Either make your selector as specific or more specific, or apply the !important directive, but that is not recommended (also see ITCSS).
Loading a specific bit of CSS after everything else does not give it any precedence. What you'll want to do is make sure it has a more specific selector. (You could also use !important, but that a hack and I don't recommend it unless you can't get anything else to work.
If .mytableclass td is the selector bootstrap uses, consider adding something to the front of it. ie body .mytableclass td. Or you can go into the HTML itself and add an id that you only use as a selector in the AJAX CSS.
Lets say I have this jQuery code
$('head').append('<style>body, html { margin: 0!important; }.. even more ...</style>');
Will this overwrite the current css (note the !important)
I've tested it in my browser and it is working as expected and overwriting the current css.
What I basically want is to add some css without a .css file.
Since you applied a direct style tag, it will overwrite any css. !important always writes over any class, and is generally considered bad practice. why not add a class?
I am trying to add some CSS styling (in addition to the styles already in place) via Javascript (simply because i do not have access to the main CSS file)
http://jsfiddle.net/pbPyU/
HTML:
<a class='store-locator-button'>replace me</a>
JAVASCRIPT:
$(function() {
$('.store-locator-button').addClass('tempstorebutton');
$("a.store-locator-button").each(function(index,el){
$(el).text('BUSCAR UNA TIENDA');
});
});
CSS:
.tempstorebutton{padding:5px; color:#fa5dae;}
It works fine in JSfiddle, but not on my site. Any suggestions?
The order in which CSS is applied is important. You should add your JavaScript code at the bottom of the page to make sure it gets applied in case some other styles are already applied before hand. Try !important property too in case your CSS is overriden.
I would recommend having your own css file being rendered after the one you want to override.
Then you should add those classes that you want to override on your css file with the styles that you want. Otherwise it's a frustrating path you should avoid.
!important declarations should not be used unless they are absolutely necessary.
Every browser has default css settings. You must override css.
one approach is to reset css: reset css example
another approach is to override only the parts you need css with !important
keep in mind that in css the more specific is on a higher priority to render
you can also try to check if the css changes you make appear with changing the css code in firefox firebug or google chrome developer or your browser debugging interface and than you can see if your css tweeks work for real or not.
you can also try to give the class a different name.
hope it helps feel free to correct and edit anyone