I have a problem that might interest some. I was using sweet alert 2 in my lightning component bundle "pages". It was working like a charm:
https://imgur.com/KpKf3dV
But now, in my sandbox after the summer 18 update the sweet alert modal turned into a bitter corner alert:
https://imgur.com/6SEJK8a
Can anyone please help me?
I uploaded the js file from the sweet alert website as a static resource in SalesForce.
I am not sure if the css from sweet alert is being modified by the theme or if it is something else, but I don't know how to fix it, and I have to until this update is applied to production orgs. I also accept suggestions of modals, but I did not find anything as easy and nice looking as this.
So, I solved it. The solution is similar to what Limon proposed. I downloaded only the css, uploaded as sweetAlertStyle (static resource) and used the tag:
<ltng:require styles="{!$Resource.sweetAlertStyle}" scripts="{!$Resource.sweetAlert}"/>
The sweetAlert was the script I downloaded from sweetAlert2 website (also uploaded as a static resource).
PS: I had to change the script a little bit to get it working even before I had this problem, something about the function that checks if an object has some property, but this is another problem...
Related
how is it going?
it has been some time since i was around here and i learned a new things being one of them react, i'm developing a personal project and i'm stuck with developing a light/dark mode with bootstrap in react, how can i do this? is there any example video or code or anything you know about it? i found in youtube only plain css and since i'm using bootstrap i'm afraid that won't work for my project, it could just change my background but i want to change also some structures of my site, any advice or tip would be really thankful.
Yeah I can help !
You need to use states as the theme btn is toggled, and update properties according to that, I have previously worked upon that so I am sharing link of that project: https://satellite-system.github.io/TextUtils---React-js-Web/
, github link : https://github.com/Satellite-system/TextUtils---React-js-Web
Hope it will help.
It was actually a project from youtube, but I have forgot its channel.
I've recently updated my react app to the latest version 18, but since doing that the html in localhost disappears after a few seconds. When I go to dev tools and look at the in 'Elements', it's empty but all of the content is still on the page, I just can't interact with it (click links or buttons, etc.).
Does anyone know what is causing this as I need to know before I push my code to production, as I'm not sure if this is a development environment issue.
I'm more than happy to post screenshots of my code, but I don't even know which screenshots would be helpful/relevant. Let me know if you need any. Thanks
For context, I am building a React/Redux chrome extension that is a sit/stand timer. When an interval is up, the extension will pop up and give the options to stay in that posture for longer, or log that they have changed positions.
Since I cannot programmatically open the popup.html, I am thinking that I can use a content script to inject a modal into whatever tab the user is currently on.
I've been googling "Injecting React Component Into Chrome Extension" for a couple of hours now, and most of the articles are a couple of years old and have not worked for me.
If anyone has knowledge, a tutorial, or an alternative solution, that would be amazing. Thanks!
I'm creating a gallery of images in ReactJs. There are a lot of examples online, but i didn't find anything that is perfectly responsive on desktop browsers and also completely mobile friendly.
In particular, when an image is opened on the mobile browser, i need to be able to zoom the photo with a double tap, and close the photo when i drag it to the bottom
I already tried all the principal solution that i found online.
For example, i tried all of these https://reactjsexample.com/tag/lightbox/
and much much more.
I also tried different approaches like CSS rules, Viewport rules, create a simple zoomable html div, etc... But nothing worked.
Basically, what i what to achieve is exactly something like this: https://www.lucapetruzzi.com/gallery/1
Created thanks to this library: https://photoswipe.com/ that unfortunately i can't use in React.
(I also tried the react-photoswipe and react-photoswipe-2 libraries but it seems not maintained and not working with new versions of React)
Thank you for any help
So for previous comments, I wrote a snippet for you, check here
Here are the mainly steps:
use npm install photoswipe so DON'T need to include builded js but NEED to include css in index.html (or you can import in App.css)
write the markup in js component
init it by click button or in useEffect
I have an issue with share/like button from Angular app. I finally made it working correctly with links but share/like preview if completely wrong. I tried XFBML.parse(), switching to html 5 mode, etc.
There are two complete enigmas:
1. I got "Given URL is not allowed by the Application configuration..." despite adding all possible variants to fb app setting.
When share preview appear - it has "Angular", but I never added it anywhere.
Here is the link
Would be grateful for any ideas...
Thx
The Facebook Scraper only looks at the HTML code your server delivers, it does not execute any JavaScript.
So if you want to share different articles, you need an individual URL for each article, that delivers the relevant meta data when requested from the server.
You can find some more explanation and hints on how to implement this in this article, http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app