镀铬检查员显示错误定位的元素与recaptcha

时间:2018-05-25 14:20:43

标签: angular google-chrome recaptcha



 <li class="navigationFm__frame">
            <fieldset *ngIf="!showSecondLoader" class="spring spring--sm">
              <div class="form__row no-gutter--bottom align--center dialog__message">
                <div class="dialog__icon-circle dialog__icon-circle--dark">
                  <svg class="dialog__icon-circle--icon icon icon--fill icon--large">
                    <use xlink:href="#icon-router" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
                  </svg>
                </div>
                <p class="navigationFm__frame--text">
                  {{'subscribesText' | translate}}</p>
              </div>
              <div class="dialog__container-dark">
                <div class="align--center with-border">
                  {{resultAvailableMsg}}
                </div>
                <!-- Start Captcha will be added here -->
                <div class="gutter--top grid grid--gutter" *ngIf="captchaValidationMessage != ''">
                  <div class="grid__item grid__item--gutter grid__item--sm-1/1 grid__item--1/1 flush--sm-bottom">
                    <div class="alert alert--light alert--warning alert--arrow validation__warning" *ngIf="captchaValidationMessage != ''">
                      <div class="caption">
                        <div class="caption__media caption__media--top alert__media">
                          <svg class="icon icon--small alert__icon">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-block"></use>
                          </svg>
                        </div>
                        <div class="caption__text caption__text--top alert__text">
                          {{ captchaValidationMessage }}
                        </div>
                      </div>
                    </div>
                    <div class="reCaptchaContainer">
                      <re-captcha [hidden]="hideCaptcha" (captchaResponse)="validateCaptcha($event)" required [site_key]="googleSiteKey" language="{{currentLang}}"></re-captcha>
                    </div>
                  </div>
                </div>
                <!-- End Captcha will be added here -->
                <div class="form__row no-gutter--bottom" *ngIf="isAvailable">
                  <button type="reset" name="" class="button button--primary button--full-width" (click)="getAuthenticationKey()">
                    {{'Continue' | translate}}
                  </button>
                </div>
                <div class="form__row no-gutter--bottom" *ngIf="!isAvailable">
                  <button type="reset" name="" class="button button--primary button--full-width" (click)="goBackToCheckAvailabilityAgain()">
                    {{'Check Availability Again' | translate}}
                  </button>
                </div>
                <div class="form__row no-gutter--bottom">
                  <button type="reset" onclick="closeDialog()" name="" class="button button--secondary button--full-width">
                    {{'Cancel' | translate }}
                  </button>
                </div>
              </div>
            </fieldset>

            <div *ngIf="showSecondLoader"  class="spring spring--md">
              <fieldset>
                  <div class="form__row align--center tabs__content">
                      <div style="min-height:  200px">
                          <div>
                              <div class="loading-spinner"></div>
                          </div>
                      </div>
                  </div>
              </fieldset>

              <span class="heading heading--4 heading--light heading--center">{{ 'Currently processing your request'|translate }}</span>
            </div>

          </li>
&#13;
&#13;
&#13;

我有一个使用google recaptcha的angular5应用 当我切换到rtl时,元素位置发生变化 当我在谷歌浏览器中检查它们时,它会显示正确位置的边框,我附上两个插图用于插图

我非常感谢帮助,伙计们

the element correctly positioned without captcha

the element position is wrong with captcha, still inspector hover shows the same position as old one

我正在使用此插件进行重新学习 https://www.npmjs.com/package/angular2-recaptcha

模板,其中添加了错误

0 个答案:

没有答案