内容与表格angular7重叠

Question

第一次遇到此奇怪的错误，在移动设备上单击任何字段，就会出现键盘。它将所有内容向上推并与表单重叠。

应用程序使用Angular 7编码，此错误仅在移动版本上。

这是主要组成文件，AWSTemplateFormatVersion: 2010-09-09 Description: The AWS CloudFormation tutorial Resources: SomeDeploymentBucket: Type: 'AWS::S3::Bucket' AppLogGroup: Type: 'AWS::Logs::LogGroup' Properties: LogGroupName: /aws/lambda/some-lambda # ========= The Lambda Execution Role ========= IamRoleLambdaExecution: Type: 'AWS::IAM::Role' Properties: AssumeRolePolicyDocument: Version: 2012-10-17 Statement: - Effect: Allow Principal: Service: - lambda.amazonaws.com Action: - 'sts:AssumeRole' Policies: - PolicyName: !Join - '-' - - dev - some-app - lambda PolicyDocument: Version: 2012-10-17 Statement: - Effect: Allow Action: - 's3:*' - 'rds-db:connect' - 'rds:*' - 'es:*' Resource: '*' Path: / RoleName: !Join - '-' - - some-app - dev - eu-west-1 - lambdaRole ManagedPolicyArns: - !Join - '' - - 'arn:' - !Ref 'AWS::Partition' - ':iam::aws:policy/service-role/AWSLambdaVPCAccessExecutionRole' # ========= The Lambda ========= AppLambdaFunction: Type: AWS::Lambda::Function DependsOn: - AppLogGroup - IamRoleLambdaExecution Properties: FunctionName: some-lambda Handler: index.lambda_handler Runtime: python2.7 Timeout: 60 MemorySize: 1024 Role: !GetAtt - IamRoleLambdaExecution - Arn VpcConfig: SecurityGroupIds: - !Ref xxxVPCSecurityGroup SubnetIds: - !Ref xxxLambdaSubnet1 - !Ref xxxLambdaSubnet2 Code: ZipFile: !Sub | from __future__ import print_function import boto3 iam = boto3.client('iam') def lambda_handler(event, context): print('called lambda_handler') # ========= VPC ========= xxxVPC: Type: 'AWS::EC2::VPC' Properties: CidrBlock: 172.31.0.0/16 InstanceTenancy: default EnableDnsSupport: 'true' EnableDnsHostnames: 'true' xxxVPCSecurityGroup: Type: 'AWS::EC2::SecurityGroup' Properties: GroupName: VPC SG GroupDescription: VPC Security Group VpcId: !Ref xxxVPC xxxLambdaSubnet1: Type: 'AWS::EC2::Subnet' Properties: VpcId: !Ref xxxVPC CidrBlock: 172.31.32.0/20 xxxLambdaSubnet2: Type: 'AWS::EC2::Subnet' Properties: VpcId: !Ref xxxVPC CidrBlock: 172.31.16.0/20 # ========= Elasticsearch ========= xxxESSecurityGroup: Type: 'AWS::EC2::SecurityGroup' Properties: GroupName: ES SG GroupDescription: ES Security group VpcId: !Ref xxxVPC SecurityGroupIngress: - IpProtocol: -1 FromPort: 0 ToPort: 65535 SourceSecurityGroupId: !Ref xxxVPCSecurityGroup xxxElasticSearch: Type: 'AWS::Elasticsearch::Domain' Properties: AccessPolicies: Version: 2012-10-17 Statement: - Action: - 'es:*' - 'ec2:*' - 's3:*' Principal: AWS: - '*' Resource: '*' Effect: Allow DomainName: es-xxx-domain EBSOptions: EBSEnabled: true Iops: 0 VolumeSize: 20 VolumeType: "gp2" AdvancedOptions: rest.action.multi.allow_explicit_index: 'true' ElasticsearchClusterConfig: InstanceCount: 1 InstanceType: m4.large.elasticsearch DedicatedMasterEnabled: 'false' VPCOptions: SecurityGroupIds: - !Ref xxxESSecurityGroup SubnetIds: - !Ref xxxLambdaSubnet1 是主要形式， import urllib2 def lambda_handler(event, context): print('called lambda_handler') data = '' url = 'https://vpc-es-xxx-domain-fixthis.es.amazonaws.com' req = urllib2.Request(url, data, {'Content-Type': 'application/json'}) f = urllib2.urlopen(req) for x in f: print(x) f.close() 只是简单的图像轮播。

主要组件

app-layout

布局组件

app-slider

SCSS

<div class="container-fluid h-100">
  <div class=" wrapper h-100">
    <div class="row main pt-3 pb-3 pr-3 pl-3 clearfix">
      <div class="col-sm col-md-3">
        <app-layout></app-layout>
      </div>
      <div class="col-sm col-md c4 d-none d-sm-block">
        <app-slider></app-slider>
      </div>
    </div>
    <!-- about us -->
    <div class="row mb-4" id="destination" #destinationRef>
      <div class="col col-4 d-none d-sm-block">
        <div class="g-block"></div>
      </div>
      <div class="col col-text p-5 d-flex about-text">
        <h3>About us</h3>
        <p>
          Sabset.com is a platform of a community where proficient and trustful
          resources are available.
        </p>
        <h4>OUR MISSION:</h4>
        <p>
          is to provide consumer the very best and highly capable technicians to
          resolve the basic home and office requirements with in a very
          affordable rates.
        </p>
        <h4>OUR VISION:</h4>

      </div>
    </div>

    <!-- how it works section -->
    <div class="row" id="howitwork" #howitworkRef>
      <div class="col col-4 d-none d-sm-block">
        <div class="g-block"></div>
      </div>
      <div class="col col-text p-5 d-flex">
        <h3>How its works</h3>
        <p>
          (" Consumer visit our website or application")
        </p>
        <p>
          (" Consumer fill the task on our website or application ")
          Congratulation you have done we will contact you shortly.
        </p>
        <div class="mt-3 mb-3">
          <form (ngSubmit)="onSubmit()" #contactForm="ngForm">
            <div class="form-group">
              <input
                type="text"
                name="name"
                id="name"
                [(ngModel)]="model.name"
                class="form-control"
                placeholder="Name"
                required
                #name="ngModel"
              />
              <div
                *ngIf="name.invalid && (name.dirty || name.touched)"
                class="error"
              >
                <div *ngIf="name.errors.required">
                  Name is required.
                </div>
              </div>
            </div>
            <div class="form-group">
              <input
                type="text"
                name="email"
                id="email"
                [(ngModel)]="model.email"
                class="form-control"
                placeholder="E-Mail"
                required
                email
                #email="ngModel"
              />
              <div
                *ngIf="email.invalid && (email.dirty || email.touched)"
                class="error"
              >
                <div *ngIf="email.errors.required">Email is required.</div>
                <div *ngIf="email.errors.email">
                  Email must be a valid email address.
                </div>
              </div>
            </div>
            <div class="form-group">
              <textarea
                name="message"
                id="message"
                [(ngModel)]="model.message"
                rows="5"
                class="form-control"
                placeholder="Message"
                required
                #message="ngModel"
              ></textarea>
              <div
                *ngIf="message.invalid && (message.dirty || message.touched)"
                class="error"
              >
                <div *ngIf="message.errors.required">Message is required.</div>
              </div>
            </div>
            <div class="service-error" *ngIf="error">
              <h1>{{ error.errorTitle }}</h1>
              <h3>{{ error.errorDesc }}</h3>
            </div>
            <button
              [disabled]="!contactForm.form.valid"
              class="btn btn-primary float-right"
              type="submit"
            >
              Send Message
            </button>
          </form>
          <div [hidden]="!submitted" class="contact-message">
            <div *ngIf="model.id" class="contact-success">
              <h2 class="success">Success!</h2>
              <h4>Contact form has been successfully submitted.</h4>
              <br />
              <button (click)="gotoHome()" class="btn btn-info">
                Go to Home
              </button>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col d-flex mt-3">
            <ul class="list-inline w-100 h-social">
              <li class="list-inline-item">
                <img
                  src="../assets/gstore.png"
                  alt="Google Play"
                  class="img-fluid"
                />
              </li>
              <li class="list-inline-item">
                <img
                  src="../assets/astore.png"
                  alt="Apple Store"
                  class="img-fluid"
                />
              </li>
              <li class="list-inline-item">
                <img
                  src="../assets/facebook.png"
                  alt="Facebook"
                  class="img-fluid"
                />
              </li>
              <li class="list-inline-item">
                <img
                  src="../assets/instagram.png"
                  alt="Instagram"
                  class="img-fluid"
                />
              </li>
              <li class="list-inline-item">
                / official
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- footer -->
    <div class="footer d-flex flex-column">
      Ⓒ 2019. All Right Reserved.
      <span class="bar"></span>
    </div>
  </div>
</div>