I am having trouble with my gwt application on Chrome (mac os + windows) when I drag and drop.
I don't know when it started, which chrome update.
When I drag and drop an html item it hides most of the screen except the html item I use.
Here is the video : https://drive.google.com/file/d/14d13CrzKPRwB1nAgAcIMQI_4PBHBaXo8/view?usp=sharing
To reproduce this, I remove all the html from my application except a small part (what you can see on the video)
I keep all js + css, I put break points on all html elements, to see if something is changing on drop event.
There is something with gwt because If I remove the iframe with my application name as id I don't have the problem anymore.
No problem on firefox or safari, no html or css is modified when I drop the html element so I thought the problem was chrome but when I remove the iframe with my application name as id it works (but my application doesn't work anymore).
I don't know why when I resize the window the screen is refreshed and everything is ok too.
Edit it works with the chrome bêta https://www.google.com/intl/fr/chrome/beta/ so chrome problem
Ok with v105
Not Ok with v106
Ok with bêta v107
Related
I'm stuck with a problem in IE11.
The drag and drop events are not triggered in IE11.
First I thought it has something to do with the IE settings (security>Allow drag drop).
I use jQuery, but it doesn't work with plain JavaScript as well.
I broke it down to the following piece of code:
<script>
document.addEventListener('dragenter', function (event) {
alert("Dragenter");
});
</script>
When I drag a file from my desktop into the browser, the alert appears.
It works fine with Chrome, Edge, Firefox, but not with IE.
Unfortunately it still doesn’t work in my current project. Even the simple js snippet.
Any Ideas?
I added my site to the trusted sites, enabled ActiveX, Enabled all other scripting settings, but it looks still like the Browser is blocking drag and drop actions for my site.
I've tested on my side and the alert appears successfully.
I suggest that you could check the Drag and Drop feature in your IE.
Go to Internet Options
Go to Security tab
Click on Custom level
Search for Drag and Drop settings and Click on Enables
Click Ok
Solved!
The problem was, that i started my IE as an administrator (from Visual Studio).
It is not possible , to move files from your local users desktop, to an IE in administrator-mode.
I recently upgraded Sitefinity from 9 to 10. After the upgrade I am not able to edit the content of content blocks on the pages. This only happens with Chrome. Everything seems to work just fine in IE and FireFox. After clicking "Edit" on any of the Content type controls (Content block, image, video, ect) the white loading box shows and then just goes to an all white window the the x to close it out. Any of our custom widgets work fine. There are no Javascript errors showing in the console. Has anyone seen this type of behavior and how is it fixable?
** Note ** The MVC Content types do seem to work. It appears that it's just the regular Content types that do not seem to work correctly.
Have you zoomed in or out your Chrome browser?
I've seen this issue with Chrome and WebForms widget designers.
Just try to zoom in and out the browser while the widget designer is open - you should start seeing the contents of the designer.
When I use Firefox developer tools to edit the body of a webpage, the page buttons either disappear or stop functioning like in the example below. This does not happen in Chrome and all the buttons work fine as they suppose to.
here are the steps that lead to the problem:
I go to the webpage that I need to work with, then I need to edit a few things in the page so I press Ctrl+Shift+C to open the dev tools, right click on <body> then Edit As HTML and change what I need to change and apply it and it works just fine with Chrome but in Firefox and other browsers the buttons stops working or disappear.
Here's the link to the example page. (This is only an example not the real page I'm working with, because the real one is in Arabic and requires more steps.)
This is because the Firefox DevTools obviously do the same as when you copy the outer HTML and then execute this
document.body.outerHTML = `*copied HTML*`;
inside the DevTools' console.
That's why all the event handlers as well as iframe contents are gone after you finish editing the HTML, e.g. in this case you can't edit the code at the left side and there is no output shown at the right anymore.
The Chrome DevTools seem to do something smarter here and recognize what has changed and only update those parts when you save the HTML. Therefore the output on the example page is still visible afterwards and the code can still be edited.
I've filed an enhancement request for that, so the behavior in this case can get improved.
I am having trouble with hiding an element that is used as file select for PLupload.
The following code works in Chrome, Firefox, IE10,...
Click "clickme", then clicking "Me no work in IE" will open a CommonDialogBox to select files, and "Hello!" will appear.
http://fiddle.jshell.net/hZY67/13
For IE8:
http://fiddle.jshell.net/hZY67/13/show
Observation: In IE8 the CommonDialogBox doesn't pop up, but "Hello!" appears
Now remove display:none from the css.=> problem solved
Conclusion: When an element is attached to PLupload as fileselect, and a parent element's display is toggled, the connection between the fileselect and PLupload breaks.
Any light on this situation and possible workaround appreciated :)
http://www.plupload.com/punbb/viewtopic.php?pid=2381#p2381
#E-SPAR, Plupload needs to measure elements to generate file dialog trigger and position it properly, which obviously is not possible on elements having: display:none;. You might want to call refresh, after you show up your dialog.
In case of Plupload UI widget:
$('#uploader').plupload('getUploader').refresh();
I am having an issue where dynamically-created links are working on all devices I have tested (in all desktop browsers, on my iPhone, on my iPad, and on my Samsung Galaxy Tablets Chrome Browser), but will not work when clicked on Android phones (I've tested on three Android phones running Chrome, sorry don't have the Chrome versions, but one phone is really new and the others are 1-2 years old at most).
I am dynamically-creating the links to add items to a cart (inside of a larger dynamically-created entity) in a loop.
The link in question is constructed basically like this:
var itemHTML = "";
...
itemHtml += '...<span>\n'
...
Where gAddLink is just a standard URL. I am then inserting that itemHTML (in addition to other HTML) onto the page dynamically using document.write().
Since this is being dynamically created on page load (for reasons out of scope for this question, but it is a necessity), I know I have to have a click handler set up as so:
$('.elementToInsertTo').on('click', '.add2CartLink', function() { ... });
Where '.elementToInsertTo' is the parent element that is NOT dynamically created, and is present on the page at page load. There are multiple of these parents, hence why I can't use an element ID. Don't think it makes a difference though.
Again, I can confirm that the function call in this click listener works everywhere except Android phones (as far as I can tell). Any idea why this may be? I've read StackOverflow pages all day, but nothing seems related to this. I've read a bunch about JS closures (which may still be the issue) and the like, but none of that seems to be relevant since the link click listener is working on most all devices I have tested on (even the Android tablet's Chrome browser, which is the part that really is confusing to me).
If you happen to have seen this issue before or have any idea why this may be happening, please write it out before reading the next part, so as not to confuse or bias you.
Ok, now to the part that is even more mind-boggling, though I hope this only helps figure this out and doesn't confuse the situation.. I connected one of the phones to my computer with a USB and did some remote debugging using Chrome developer tools as described here (https://developers.google.com/chrome-developer-tools/docs/remote-debugging). I could confirm there that the click listeners were not working (they weren't being triggered)... (and now here comes the crazy part) UNTIL I did some element inspection on the link (i.e. the link was highlighted on my phone as I was inspecting the DOM-element in my browser, again using Chrome dev tools) and then clicked the link. This made it so that the click listener worked! What?? To debug further, if I inspected any of the DOM elements on the page and clicked the link, the click listener worked. If I changed tabs away from the dev tools tab, or simply stopped inspecting the DOM elements in Chrome Dev tools, the link click listener no longer worked. I really don't know what to make of this, but I'm hoping this part of information narrows down what may be going on with the Android phones and the click listeners.
Happy to try to provide any other info I can, though I am without the Android phone for testing at the moment.
Thanks!
Tap was still needed (thanks for both suggestions), but the issue was with a 3rd party JS library stopPropogation() call. Apparently this only happened on Android phones, but regardless, after removing the line, the click (on computers) and tap (on mobile) now works everywhere. Thanks!