Recaptcha appears with Scroll Bar

Asked

Viewed 80 times

1

I’m creating an aspx page, and while doing the layout I added Recatcha from google, but this one appears with a scroll bar and I don’t know how to remove. Probably something is interfering. 

* {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
}

#wrapper {
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

.header {
  width: 100%;
  color: white;
  padding: 10px;
  height: 100px;
  margin: 0px 0px 0px 0px;
  background-color: #032D63;
}

.content {
  height: 580px;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0px 0px 15px 15px;
  display: inline-block;
  width: 70%;
  margin: 0 auto;
  color: black;
  border: 1px solid white;
  background: white;
  margin: 0px 20px 20px 20px;
  padding: 10px;
}

.footer {
  align-self: flex-end;
  bottom: 0;
  width: 100%;
  color: white;
  padding: 10px;
  height: 15px;
  margin: 0px 0px 0px 0px;
  background-color: #032D63;
}

.title {
  vertical-align: middle;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
  border-radius: 15px 15px 0px 0px;
  display: inline-block;
  width: 70%;
  margin: 0 auto;
  height: 30px;
  color: white;
  border: 1px solid white;
  background: #054394;
  margin: 20px 20px 0px 20px;
  padding: 10px;
}

.textbox {
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.Submitbtn {
  width: 230px;
  background-color: #ff8000;
  color: white;
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.Submitbtn:hover {
  background-color: #032D63;
}

.text-xs-center {
  text-align: center;
}

.g-recaptcha {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PedidosEmissaoCertifDiplomas.aspx.cs" Inherits="EmissaoCertifDiplomas.PedidosEmissaoCertifDiplomas" %>

  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">

  <head runat="server">
    <title>
      <asp:Literal runat="server" Text="..." />
    </title>
    <link href="PedidosEmissao.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html;" />
    <script src="https://www.google.com/recaptcha/api.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

    <script type="text/javascript">
      function RecaptchaAlert() {
        swal("Captca Not Filled!", "Please fill in the captcha code", "warning");
      }

      function EmailNaoExiste() {
        swal("Email Inválido", "...", "warning");
      }
    </script>
  </head>

  <body style="background-color:#f0f0f2;overflow:hidden;">
    <form runat="server" id="form1">
      <div id="wrapper">
        <div id="header" class="header"></div>
        <div class="title">
          <h2 style="text-align:center">Emissão de Certificados/Diplomas</h2>
        </div>
        <div id="content" class="content" style="text-align:left">
          <div style="margin-left:5%;margin-bottom:2%;margin-top:2%">
            <img src="Images/itemV.gif" />
            <asp:Label ID="IntD" runat="server" Text="..."></asp:Label><br /><br />
            <table style="width:100%;">
              <tr>
                <td style="width:70px;">
                  <asp:Label ID="Email" runat="server" Text="Email:"></asp:Label>
                </td>
                <td>
                  <asp:TextBox ID="Emailtxt" runat="server" CssClass="textbox" style="height: 10px;width:350px;" required autocomplete="off" pattern="[^@\s]+@[^@\s]+\.[^@\s].{0,}"></asp:TextBox>
                </td>
              </tr>
              <tr>
                <td style="height:27px"></td>
              </tr>
            </table>
          </div>
          <div class="text-xs-center">
            <div class="g-recaptcha" data-sitekey="<%=ConfigurationManager.AppSettings[" ReCaptcha.SiteKey.PedidosEmissaoCertifDiplomas "] %>"></div>
          </div>

          <div style="text-align:right;margin-right:5%">
            <asp:Button CssClass="Submitbtn" runat="server" ID="btnSubmitForm" Text="Submit" OnClick="btnSubmitForm_Click" />
          </div>

        </div>
        <div style="height:50px"></div>
        <div id="footer" class="footer"></div>
      </div>
    </form>
  </body>

ReCaptcha com Scroll bar

How can I take the Recaptcha scrollbar?

html css recaptcha aspx

  • Have you tried adding to the class g-recaptcha the overflow-y: hidden?

  • @Ricardopunctual Yes was the same

  • If it’s a iframe that you are calling with Captcha you can put this right in the iframe: scrolling="no" Or else try via css iframe{ overflow:hidden;} Of any foma... I tested here and in my document appears without the scroll

  • @hugocsl No changes appears without scroll? I tested in 2 browsers in both appears to me scroll

  • In Chrome no scroll appeared! I just copied this code there and pasted it into a new document, without any framwork bootstrap type etc. it gave was a bug in the pq tag I did not go to localhost open a normal html even to test

1 answer

1


When using your css configuration *{... overflow-x... the selector * indicates that you should assign such styles to all elements of the page and by assigning this style is giving conflict with some code you made or even with something from google for reCaptcha. Sopt topic talking about the css selector* 

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
}

#wrapper {
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

.header {
  width: 100%;
  color: white;
  padding: 10px;
  height: 100px;
  margin: 0px 0px 0px 0px;
  background-color: #032D63;
}

.content {
  height: 580px;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0px 0px 15px 15px;
  display: inline-block;
  width: 70%;
  margin: 0 auto;
  color: black;
  border: 1px solid white;
  background: white;
  margin: 0px 20px 20px 20px;
  padding: 10px;
}

.footer {
  align-self: flex-end;
  bottom: 0;
  width: 100%;
  color: white;
  padding: 10px;
  height: 15px;
  margin: 0px 0px 0px 0px;
  background-color: #032D63;
}

.title {
  vertical-align: middle;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
  border-radius: 15px 15px 0px 0px;
  display: inline-block;
  width: 70%;
  margin: 0 auto;
  height: 30px;
  color: white;
  border: 1px solid white;
  background: #054394;
  margin: 20px 20px 0px 20px;
  padding: 10px;
}

.textbox {
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.Submitbtn {
  width: 230px;
  background-color: #ff8000;
  color: white;
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.Submitbtn:hover {
  background-color: #032D63;
}

.text-xs-center {
  text-align: center;
}

.g-recaptcha {
  display: inline-block;
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PedidosEmissaoCertifDiplomas.aspx.cs" Inherits="EmissaoCertifDiplomas.PedidosEmissaoCertifDiplomas" %>

  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">

  <head runat="server">
    <title>
      <asp:Literal runat="server" Text="..." />
    </title>
    <link href="PedidosEmissao.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html;" />
    <script src="https://www.google.com/recaptcha/api.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

    <script type="text/javascript">
      function RecaptchaAlert() {
        swal("Captca Not Filled!", "Please fill in the captcha code", "warning");
      }

      function EmailNaoExiste() {
        swal("Email Inválido", "...", "warning");
      }
    </script>
  </head>

  <body style="background-color:#f0f0f2;">
    <form runat="server" id="form1">
      <div id="wrapper">
        <div id="header" class="header"></div>
        <div class="title">
          <h2 style="text-align:center">Emissão de Certificados/Diplomas</h2>
        </div>
        <div id="content" class="content" style="text-align:left">
          <div style="margin-left:5%;margin-bottom:2%;margin-top:2%">
            <img src="Images/itemV.gif" />
            <asp:Label ID="IntD" runat="server" Text="..."></asp:Label><br /><br />
            <table style="width:100%;">
              <tr>
                <td style="width:70px;">
                  <asp:Label ID="Email" runat="server" Text="Email:"></asp:Label>
                </td>
                <td>
                  <asp:TextBox ID="Emailtxt" runat="server" CssClass="textbox" style="height: 10px;width:350px;" required autocomplete="off" pattern="[^@\s]+@[^@\s]+\.[^@\s].{0,}"></asp:TextBox>
                </td>
              </tr>
              <tr>
                <td style="height:27px"></td>
              </tr>
            </table>
          </div>
          <div class="text-xs-center">
            <div class="g-recaptcha" data-sitekey="<%=ConfigurationManager.AppSettings[" ReCaptcha.SiteKey.PedidosEmissaoCertifDiplomas "] %>"></div>
          </div>

          <div style="text-align:right;margin-right:5%">
            <asp:Button CssClass="Submitbtn" runat="server" ID="btnSubmitForm" Text="Submit" OnClick="btnSubmitForm_Click" />
          </div>

        </div>
        <div style="height:50px"></div>
        <div id="footer" class="footer"></div>
      </div>
    </form>
  </body>

Note: I took yours overflow:hidden tag <body> because it was preventing the scroll of the page, making it impossible to see its complete.

I hope I helped, in case you can’t comment there I try again.

  • 1

    But his scroll is not on the X axis, the Captcha window is scrolling on the Y axis...

  • Well, I misquoted my answer, but I edited there. In my view, giving conflict with something he did or with something google(reCaptcha), at first I provided the solution, if someone identify why is welcome to edit the answer, because for now I did not find.

  • If you did not find the definitive answer, and are not sure if this is what is causing the problem, you do not think that it would be more appropriate to comment on the question than to post an answer that you do not know if it solves the problem...?

  • I know that’s it, it worked! took the scroll of captcha. I don’t know what the overflow-x is giving conflict but ta, interpretation zero.

  • Guy I tested here, exactly with the question code, and in Chrome normal April, not even appeared scroll, in my browser at least this CSS has nothing to do with the problem. But if you say it solves the author of the question will certainly give you a feedback

  • 1

    It looks great, thank you!

Show 1 more comment

Browser other questions tagged html css recaptcha aspx

You are not signed in. Login or sign up in order to post.