Gravity Forms Google Nocaptcha Recaptcha image picker wider than mobile screen - responsive-design

I'm having an issue with Gravity forms' Google noCaptcha reCaptcha (Wordpress Plugin). The pop-up image picker (after you check the box it pops up) is going off of the screen in a mobile size window. It's the only element that does that, so I'm lead to believe that it's not an issue with my styling. Has this ever happened to anyone before? I've tried researching it but the only thing I can find is talking about the "I'm Not a Robot" box not being responsive, which is NOT my issue here.
Here's an image of the site before the box is checked:
And here is an image of after it's checked:
Thanks in advance!

You can fix that issue with css. Kindly read this http://www.scriptscoop.com/t/6d0a4ba8dc7e/html-why-didnt-google-make-the-new-v2-recaptcha-mobile-friendly.html

Related

Is it possible to change user's phone orientation using react?

I have the next question. I am developing a react application with some images. The user has the possibility to click and open a full-page image. Because the image's orientation is horizontal on the mobile, it does not look good. My idea is when the user clicks on the full page icon, the orientation of the phone becomes horizontal as is implemented on youtube. I tried to find some information about that, but I am not sure if it is even possible, I saw that only by using react native and developing mobile applications you can have access to the user's orientation of the screen. But maybe there are some methods to do in the browser? Thanks in advance.
It is not possible to change this from the web, however you could simply rotate the image and display it full screen. This has been done here:
CSS Rotate Portrait Image 90 Degrees and Make Image Full Screen

How do I stop my ReactJS webite from twitching when I move my cursor?

A simple, one page view website, which I built on ReactJS started twitching anytime I moved my cursor. It seems like the browser width is changing, with a few pixels of margin added to the right, every time that happens. This doesn't seem to happen when viewing with the Chrome browser in mobile screen mode, under the developer tools. Which probably means it's as a result of the cursur interacting with the page. Has anyone encountered something similar?
It usually happens when you have an element that changes its width, padding, margin or border on hover or a Javascript event. This is not caused by React.
Please, share some css or JS you think may be involved to help more.
I found the bug, an animating component that kept touching the edge of the browser was the issue. I added some margin to the right of the component and the twitching stopped. Thanks to everyone for your help.

Angular Material md-datepicker open in full screen with white background

IĀ“m working with md-datepicker. In some screen resolutions (or if I do a zoom out in the browser), the calendar open in Full Screen Size and all the background is White. Also, the bar that shows the days, is hidden.
I attach an Image for reference. How can i debug for find the reason of that behavior? I have been modifying some styles, and using diferent containersĀ“ options, but without success. Thanks in advance for your help and ideas!
Image: https://s10.postimg.org/604p76qix/md_datepicker_full_Screen.png
https://postimg.org/image/hp8ov5hhh/
This was a bug in 1.1.0. Version 1.1.1 fixes it.
Workaround is setting overflow:hidden; on the md-datepicker-input-mask class

Android snackbar swipe bug

In my Android app I have a snackbar. When it is on the screen, I try to swipe it out, but after swiping another layout on the screen isn't changing. So, it looks like it presents on the screen with visibility setted to View.INVISIBLE. Is there a bug or am I doing wrong something?
It seems that there is a Bug in Support Library 23.2.0. This problem presents in Google Keep app for Android. It's shown on the screenshot.

Media query issues when resizing to mobile and then back to Desktop

I have a site which uses a different menu for mobile devices than on the Desktop version using media queries. If I resize a desktop browser window to a mobile width and click the mobile navigation dropdown button and then resize the window back to desktop size, the mobile menu remains visible instead of changing back to display:none. Unfortunately this site is still in staging so I cannot show you a live example, but I was hoping someone could point me in the right direction of getting that DIV to become hidden again once the window is resized back to full screen.
Also, I realize that the chances of this scenario playing out in the real world are slim, but the client would like for it to be addressed anyway.
Thanks!
I figured out that it was javascript that was showing the DIV in the first place, not a media query, so I just added display:none to the div for the Desktop media query and the issue has gone away. Thanks!

Resources