I was working on a nextjs project where I was asked to add an external script that dynamically creates nodes using vanilla js (createElement, setAttribute, etc.). I couldn't help but notice that the global css imported at the top of my _app.js did not affect these dynamically created elements at all. I tried importing the css many different ways but couldn't get the nodes to be repainted without modifying the external script and dynamically adding the styling there.
Does anyone know why exactly these nodes aren't repainted by the imported css and how to import them / configure next in a way where they are ?
Thank you !
P.S: script works and is imported in , tried importing css in too without luck
I found a similar question where the answer was an issue with css encapsulation. Here is the link to that answer, it explains it better than I can. Their issue was with angular so it could be the same.
Related
Really, I can't find the problem because for the same div some classes are working and some are not.
I tried to find some clues but most users didn't have paths in the tailwind config file.
My code:
fixed is working fine, but bottom-2 and right-4 aren't. Actually, I don't know if w-[405px] is working.
Add mode: 'jit', to your tailwind.config.js in order w-[405px] works. I think other classes is working you just didn't noticed it or maybe conflict on other styles in your div.
You could try vimesh style. It watches all html element class attribute changes and generate tailwind compatible css at runtime. Just add
<script src="https://unpkg.com/#vimesh/style"></script>
at the head of your page.
We use tailwind at work, not something I'm super in love with but if we're adding tailwind classes that haven't been used in the document yet we have to do it locally for the compiler to add the new classes to your document.
Unsure if this is the only way to do it as its fairly new to us, but if you bring your project to a local environment and use the command
npm run watch
it will signal to tailwind to watch your class names and add the new ones to the compiled list. so if your making custom ones using [] its likely that tailwind hasn't addded those instances to the minified version of their css
For real I dont find how to resolve it. But in my case I just added the same classes to component and after it tailwind started to see it. If someone knows why exact its happening Im still waiting for any ideas
This is my short problem, in my page I have an old version of Materialize, and I have seen in the last version of it that they have added the class "xl" to define grid's sizes.
If I upgrade all files, my page will break, because for example, in my JS file I open the modals with the function "leanModal()" and in the new version they use "modal()" and if I upgrade it, is a lot of time!!.
My questions is the next:
If I only need the class "xl" can I upgrade only the CSS File? If I would make it, would have a problem in the future with the JS File?
My version of Materialize: v0.97.7 (2014-2015)
The actual version of Materialize: v0.98.1 (2017-Now)
I'm not all that familiar with Materialize but I believe it has components that are implemented with a mix of CSS, HTML and JS. If you are using any of these components then yes, there's a possibility that other things might break. Typically these components will be expecting a certain HTML structure and CSS classes to be available/used. If the name of something has changed in one area of the framework then it's reasonable that something else could have changed elsewhere. You'd have to verify that yourself.
Yes, You will have problems because the JavaScript calls specific classes in the CSS for that version.
I have created a component (custom element) that will use specific version of JQuery and Bootstrap libraries. Now I need to add this component into other applications which are already using different version of JQuery and Bootstrap libraries. Some of the applications in which I will add my component is not using bootstrap library and including it may create other issues.
Now to keep the implementation simple, I am planning to use shadow dom. Is it possible to create a element using Shadow DOM which internally use multiple JS and CSS files but when included in other applications, does not cause any issues with respect to JS and CSS files its using.
What I know is shadow DOM does not encapsulate JavaScript. What are my options here ?
Concerning JavaScript libraries, it depends if the library was designed for that.
It's possible with jQuery thanks to its noConflict() mode.
Concerning CSS libraries, they can be included in the Shadow DOM using the #import url rule.
The rule should be placed at the very beginning of the <style> element.
I want to reset remove or make initial all the css properties defined in an external css file. I want the solution should also work when I edited/added/removed properties in css file.
So solutions in here don't work.
For example $('div').css('width','');, is not a solution cause it clears the width property in a HARDCODED way.
Also solutions like $('div').attr('style',''); does not work cause I do not use inline styling, also again $('div').removeClass(''); is not a valid solution.
Any answer would be appreciated, thanx.
You can playaround the code here: http://codepen.io/ertugrulmurat/pen/JEhfe
And; How to dynamically remove a stylesheet from the current page is not a solution, another side effect of this is that it removes all styles for all elements, this is not the case wanted
Just use this $('link[rel=stylesheet][href~="external_css_link.css"]').remove(); and remove the link of the css file which you don't want in similar manner you can again add the file
UPDATE
I tested the same in local file system where css is other file and run the same code and found that the style is removed completely and it behave in complete different manner as it working in the online javascript editor jsfiddle or any other because they internally include the css in the page they don't include the an external link thats why
$('link[rel=stylesheet]').remove();
not work here in your sample
in other way it remove the style completely
My web site changes the CSS of some DOM elements when certain events occur, but I find it icky to have CSS in both my static CSS files and in my javascript files. Is there a good model that I can stick to that allows me to change the CSS of elements in javascript while not having explicit CSS in my javascript code?
Currently I'm using calls like:
$domElement.css ('cssProperty', 'cssValue');
in my javascript code, but I don't want to do that since the CSS info should be in its own file.
What good options do I have?
I appreciate any help!
One option is to define different classes in your CSS file, then do this instead,
$domElement.addClass("theclassname");
Of course, if you're generating the 'cssValue' part of your example dynamically, then you can't specify the CSS ahead of time, so you have no choice but to modify it directly with JavaScript as you are currently doing.