I put the no-captcha recaptcha in a popup (FancyBox), everything is fine.(recaptch1.PNG) But when the user click on the checkbox the captcha image overlay is not show entirely. (recaptch2.PNG).
My question, can we place automatically the overlay the manner the user can see the directive. (recaptch3.PNG) Or can we resize the overlay to fit the iframe in the popup so everything can be seen?
Any suggestion?
recaptch1.PNG
recaptch2.png
recaptch3.PNG
I think i found a solution. After a lot of search i have found this link: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/
It's resize the container of the recaptcha V2, but not resize the overlay because google inject the overlay on the page not in the container. Because i have found that google inject the overlay on the page, I can now customize the overlay. So I use the technique on the previous link but I affect to the class "gc-bubbleDefault".
I add this in my css and this solve my problem:
.gc-bubbleDefault{transform:scale(0.82);transform-origin:0;-webkit-transform:scale(0.82);transform:scale(0.82);-webkit-transform-origin:0 0;transform-origin:0 0; 0}
It's a solution that don't work on all browser version (not old ie), but it's work for me.
Related
I want to display a dialog box hover a map. An overlay with opacity is hover the whole map (see the image below).
I successfully implemented the map without the dialog box and the overlay.
I can successfully call the dialog box after the map is rendered without any problem.
The issue is when I want to display the dialog and the overlay at the same time when the map is rendered for the first time. I get an empty map. Still, the markers and the here map logo are shown (see image below).
I tried to force reloading the base layer, without success.
I tried to restart engine, without success.
As I am using vuetify I tried to forceUpdate, without success.
Thanks for your help.
As a general rule we don't support an integration our HERE JS API with any JS framework.
Basically recommendation: Please don't use a map container (HTML element into which the map will be rendered) as part of Virtual DOM of some JS framework it will not work.
I have a WordPress website where I activated a protection for disallow image drag and drop because this allow visitor to drag and save on the Desktop images...
As soon I activate the option to disallow image drag is disabled also the possibility to drag the live helper chat widget that I have on footer right bottom of the screen.
I want exclude this element from the protection so user can move (drag) the widget of the chat. Any help or suggestion, please?
I know usually in the web is not liked protection like disable right click etc... but let me decide this on my website, I AM looking now for a solution to allow this x-frame option to be draggable again also with the active protection.
Thanks, any help will be very appreciated.
OK I do not find how to solve this issue but I found that disable block to prevent image drag and put this code:
/* Example 1: Makes all the img non-reactive to any mouse events such as dragging, hovering, clicking etc */
img {
pointer-events: none;
}
Solve my issue by making the image not draggable.
I searched for this the solution a lot but I couldn't find any post describing the same "flickering" problem.
You can see a GIF here
Situation
I have a website with a menu, using app-route as in Polymer Starterkit but enhanced with neon-animated-pages.
If you use the menu (Start, My Card, My Dashboard) there is a smooth transition.
Problem
Go to "My Card" and click the enhance card arrow down (tooltip "more info") at the first card.
Now use the menus again and the page transitions are now flickering, as soon as the animation finished. It is like all object are quickly moving somewhere and then back to the position where they should be.
What I have tried
I tried to change CSS, as it seems to "re-align" the objects on the page.
Also I had this problem before when I used javascript to route to another page, but using "a href..." for app-route (as in polymer starterkit), this problem disappeared again.
Anyone have any idea what this can be?
I checked with Chrome, Firefox and IE, seems to be the same everywhere.
Thanks very much for your help!
Kind regards,
Huebiii
Found two more sources on github with the same issue and solutions.
Apparently only slide left/right animation are affected. Using a different animation should help.
Set Element.prototype.animate = null before loading the polyfill.
Flicker after slide animation in neon-animated-pages in Chrome
web-animations-next-lite flicker #86
I'm trying to setup a Gallery similiar to the demo one, but with only one option, the fullscreen mode. The borderless mode should be default for everyone and not be able to changed.
The documentation gives this hint:
Bootstrap Image Gallery provides the additional useBootstrapModal option, which enables the original borderless layout as seen in the demo. The easiest way to enable this option is to adjust the lightbox container and set the data-use-bootstrap-modal attribute to false
However, if I do that, it wont look as pretty (no autoplay, no arrows, no small previews at the bottom.
Im trying to find a workaround for serveral days now, but wasnt able to do that.
Any hints? Thanks!
Change the div to this worked for me
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-use-bootstrap-modal="false">
I have a problem with a site (unfortunately I can't provide a link because it's on a staging environment).
I have a jqueryui dialog that opens when page loads, if you scroll down the overlay covers all of it.
Then some part of the page is updated by ajax calls and the height of the page increase and that's the issue, the overlay don't covers all the page any more and the bottom content is accessible.
I can see that the overlay adapts to certain changes, like resize of the page.. is there a way to update it when scrolling down for example? that could solve my issue
I'm sorry I can't provide a link that shows the issue..
Regards,
Gianpiero
In a similar situation I found a successful workaround by triggering a window resize event after each asynchronous DOM change:
$(window).resize();