Chrome Инспектор показывает неправильно позиционированный элемент с recaptcha - PullRequest
Новая
       5

Chrome Инспектор показывает неправильно позиционированный элемент с recaptcha

0 голосов
/ 25 мая 2018 

 <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>

У меня есть приложение angular5, которое использует Google Reaptcha при переключении на RTL, положение элементов меняется, когда я проверяю их в Google Chrome, оно показывает границы правильного положенияЯ приложил два снимка экрана для иллюстрации

Я очень ценю помощь, ребята

элемент правильно расположен без капчи

позиция элементанеправильно с капчей, по-прежнему при наведении в инспекторе отображается та же позиция, что и у старой

Я использую этот плагин для шаблона * recaptcha https://www.npmjs.com/package/angular2-recaptcha

, где ошибка добавлена ​​ниже

...