3

My problem is very weird and I didn't find any similar things around the internet. My bootstrap input font size is set to 1rem in Angular 2 project. But after recompiling project when site is loaded for the first time font is smaller then expected and when I click wherever on the page font (only in inputs) changes to expected size.

Before click anywhere on the page form looks like that: before and after it is like: after. You can see little difference here.

HTML code of the form group:

    <div class="form-group" [formGroup]="loginForm">
      <div class="input-group form-group">
        <div class="input-group-prepend">
          <span class="input-group-text"><i class="fas fa-user"></i></span>
        </div>
        <input class="form-control login-input" type="text" formControlName="login" placeholder="Email"
                      (keyup.enter)="login()" #loginName accessibilityRole=form>
        <div *ngIf="loginForm.get('login') as loginField">
          <ng-container *ngIf="loginField.dirty || loginField.touched">
            <div class="text-danger" *ngIf="loginField.hasError('required')">
                          {{loginFormErrorMessages.loginRequired}}
            </div>
            <div class="text-danger" *ngIf="loginField.hasError('email')">
                          {{loginFormErrorMessages.loginEmailError}}
            </div>
          </ng-container>
        </div>
      </div>
      <div class="input-group form-group">
        <div class="input-group-prepend">
          <span class="input-group-text"><i class="fas fa-key"></i></span>
        </div>
          <input class="form-control login-input" type="password" formControlName="password"
                      placeholder="Password" (keyup.enter)="login()">
            <div *ngIf="loginForm.get('password') as passwordField">
              <ng-container *ngIf="passwordField.dirty || passwordField.touched">
                <div class="text-danger" *ngIf="passwordField.hasError('required')">
                          {{loginFormErrorMessages.passwordRequired}}
                </div>
              </ng-container>
            </div>
          </div>
          <div class="form-group">
            <input type="submit" [disabled]="!loginForm.valid" value="Login" (click)="login()"
                      class="btn float-right login_btn">
          </div>
        </div>
    </div>

TS code is:

import { Component, OnInit, ViewChild, ElementRef, OnDestroy } from '@angular/core';
import { NgbModal, NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { LoginEntryService } from '../login-entry.service';
import { Validators, FormBuilder } from '@angular/forms';
import { Router } from '@angular/router';


@Component({
  selector: 'app-login-entry',
  templateUrl: './login-entry.component.html',
  styleUrls: ['./login-entry.component.scss']
})
export class LoginEntryComponent implements OnInit, OnDestroy {
  tmpEmail: string;
  tmpPassword: string;
  isLoggingInProgress = false;
  @ViewChild('loginName') loginField: ElementRef;

  loginForm = this.fb.group({
    'login': ['', [
      Validators.required,
      Validators.email,
    ]],
    'password': ['', [
      Validators.required
    ]],
  });

  constructor(
    private fb: FormBuilder,
    private loginService: LoginEntryService,
    private modalService: NgbModal,
    private router: Router,
  ) { }

  ngOnInit() {
    this.loginField.nativeElement.focus();
  }

I found out that when I try to change font size of input before any click on the page it doesn't react, change appears only after first mouse click on the page and then it works normally.

When I changed type="password to type="text"

the issue disappeared, but it must be type password. When I change input value in ngInit (just for tests) size of font is ok.

Same if I delete formControlName="password" and "login" so I think it may be related to angular form, but I don't know how to fix this issue.

Mystax
  • 63
  • 1
  • 1
  • 7

1 Answers1

0

Try adding "font-size" to the webkit element like this:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill::first-line {
 font-size: 1rem;
}
papastepan
  • 179
  • 9