How to achieve the functionality of ::ng-deep in a jQuery code - javascript

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

Related

How to remove all inherited CSS styling on a certain page via JS in React?

I am working on a site like Codepen and we are trying to get it off the ground.
So, a user can write some code in React and then the site will display what they've written, and will also deploy it. The problem is that some of the elements have styles which are being inherited from the main site, and cannot be overridden via CSS; the only way to do it is via inline styling. Is there some sort of JS code to reset styles to default? Something like
H1.style.* = "default"
using !important works, but it would be really to be able to give the user a clean slate for CSS when they're coding...
You can see the actual notebook (as we call it) here: https://djit.su/dL22DiUPUmCf2kQMLBoAJ
As you can see, inline styling works
And also using !important works

Shadow DOM/Web component styling in Ionic 4

I'm trying to understand how and where ionic 4 is injecting the styling for the web components into the dom. I'm not interested in changing it via the CSS variables but I want to be able to inspect the component and see where the styling is coming from. For example on https://ionicframework.com/docs/demos/api/alert/index.html?ionic:mode=ios
If you inspect the button:
I can see the stlying being applied but I can't see where all the styling is coming from, it's not in the css bundle, style tags on the page or directly on the element or applied to the shadow-root. Normally the host styling is part of the component e.g.
So where is the :host styling being defined and how/where is it being injected into the DOM?
So as far as I know all the styles you apply to your component are usually set innerHTML. You already found the style tag which is the first tag after the component. This is super full with stylings as always thats why you usually see just a snippet. That depends on the browser but to see all the stylings you may have to do a double click into the stylings between the style tags.
Usually when I want to read something like this I copy it into my editor and take a look there:
As you can see all your stylings are defined there. Stenciljs also load some general stylings to make sure everything looks proper. These are instantiated into your head section:
So I think Ionic 4 is using: https://developers.google.com/web/updates/2019/02/constructable-stylesheets
Which is why the styling isn't visible directly in the DOM. Credit to Fraser for working this out.

Style a dynamically created div element

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

How can I find the JavaScript that is setting the inline style of an element?

I'm wondering of there is any way to find out where an inline CSS style came from. As you can see in the picture below, I have an element with an inline style that was generated using JavaScript. Sometimes my code seems to break and put the width to 0px, rendering the div invisible.
I've looked through all the JS files, but can't seem to find the error.
Is there a way to find the right file and line, just like dev tools does for css files?
Since you are using Chrome:
Right click on the element in the page and Inspect Element
Right click on the DOM inspector view of the element and Break on… → Attributes Modifications
When the inline style of the element is modified with JS, the debugger will trigger as if it had hit a breakpoint.
This will show you the relevant line of JS and give you a stack so you can figure out where that line was called from.
You can use chrome debugger/ firefox to inspect the element's style and its hierarchy.
Also if you don't want a style assigned by you to be overridden, you can use !important:
#element{
css-property:value !important;
}

How do I prevent CSS interference in an injected piece of HTML?

I'm currently developing a Safari extension that uses an injected script to further inject some HTML into the current webpage, as well as injecting some other scripts to make it work. This is all working fine, but the issue is that the HTML that is injected gets affected by CSS stylesheets that the webpage has already imported. For example, the HTML looks perfect on Google.com (which has relatively little CSS styling), but awful on StackOverflow.com (which styles buttons etc).
jQuery is injected into the webpage at the time of this HTML being displayed, so I have that available. I've tried all kinds of things, including walking through all of the elements and calling removeClass() on each of them, to no avail. I've also tried to add "CSS reset" classes, etc, but nothing seems to be working.
What's the best way to go around preventing the CSS from interfering with my HTML?
You can't prevent that from happen. However, you can override the CSS rules. Give your main element a unique id (which really should be unique by obfustation, like "yourapplicationname_mainelement_name" or something), then override all possible styles that might give strange effects on your html.
Your plugin:
<div id="yourapplicationname_mainelement_name">
<p>My paragraph that must not be styled</p>
</div>
Your css:
#yourapplicationname_mainelement_name p {
display: block;
color: black;
background: white;
position: relative;
... and so on ...
}
As your css style rules are the most specific, given your id, they will override any settings present on the page where your html is injected.
Further... It might be hard to see what rules are the most important. You can use firebug or similar to understand which is overriding another. You'll have a hard time without it when developing your application.
that's a tough one. two options as I see it.
You could set a wrapping div around all your content and prefix all your css with that. example:
<body>
<div class='wrappingDiv'>
...
</div>
</body>
stylesheet:
.wrappingDiv * {}
Then when you inject jquery use that to close off the initial wrapping div before your content and to wrap any following content in the another wrapping div.
Issues:
Only possible if you are injecting
other site content onto your own
site.
This could get complicated
depending on where you are injecting
html.
The other option is to load a resetting stylesheet that targets your injected html specifically. In this case only your injected html would be wrapped but you'd need a css file that reset all attributes for all tags to their default before you add your own styles. No real issues here, just not very elegant...
Another way would be to use an element that doesn't inherit stylesheet like an iframe, but that comes with its own issues...
i have seen on different plugins that they put the code inside a iframe and they use JS to interact with the rest of the page, so you can not change the css inside.
Also i have seen that when injecting html code,people sets the style of the plugin content using the "style" attribute inside the tags so the browser will give priority to the css inside the style attribute and not the css file. The idea is to override the css,usually with the "!important" clause. But you might have some problems on different browsers
EDIT i forgot to say that my answer is on the case that you inject the code on someone's else page where you cannot control directly the css

Categories